ropav 0.0.6 → 0.0.7

package/dist/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../src/composables/useRequiredInject.ts","../src/components/radio/types.ts","../src/components/radio/useRadio.ts","../src/components/radio/radio.vue","../src/components/radio/radio.vue","../src/components/radio/radio-group.vue","../src/components/radio/radio-group.vue"],"sourcesContent":["import { inject, type InjectionKey } from 'vue';\n\nexport function useRequiredInject<T>(key: InjectionKey<T>, componentName: string): T {\n    const value = inject(key);\n    if (value == null) {\n        throw new Error(\n            `[Ropav] <${componentName}> must be used inside its parent provider component.`,\n        );\n    }\n    return value;\n}\n","import type { InjectionKey } from 'vue';\nimport type { ComponentColorValue } from '../../utils/componentColors';\n\nexport type RadioColor = ComponentColorValue;\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type RadioVariant = 'solid' | 'outline';\n\nexport interface RadioProps {\n    value: string | number;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n    id?: string;\n    name?: string;\n    modelValue: string | number | null;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    ariaLabel?: string;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface RadioGroupContext {\n    modelValue: string | number | null;\n    name: string;\n    disabled: boolean;\n    required: boolean;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    select: (value: string | number) => void;\n}\n\nexport const radioGroupKey = Symbol('radioGroup') as InjectionKey<RadioGroupContext>;\n","import { computed, provide, useId, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\n\nfunction getRadioColorStyle(color: RadioProps['color']) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-radio-custom-color': customColor,\n        '--_rp-radio-custom-on-color': 'var(--rp-color-on-primary)',\n    } satisfies CSSProperties;\n}\n\nexport function useRadio(props: Readonly<RadioProps>) {\n    const group = useRequiredInject(radioGroupKey, 'RpRadio');\n    const isChecked = computed(() => group.modelValue === props.value);\n    const isDisabled = computed(() => props.disabled || group.disabled);\n    const variant = computed(() => props.variant ?? group.variant);\n    const color = computed(() => props.color ?? group.color);\n    const size = computed(() => props.size ?? group.size);\n\n    const rootClass = computed(() =>\n        bem('rp-radio', {\n            checked: isChecked.value,\n            disabled: isDisabled.value,\n            [variant.value ?? '']: Boolean(variant.value),\n            [`color-${color.value}`]: isComponentPresetColor(color.value),\n            [`size-${size.value}`]: Boolean(size.value),\n        }),\n    );\n\n    const rootStyle = computed(() => getRadioColorStyle(color.value));\n\n    function onSelect() {\n        if (isDisabled.value) return;\n        group.select(props.value);\n    }\n\n    return {\n        group,\n        isChecked,\n        isDisabled,\n        rootClass,\n        rootStyle,\n        onSelect,\n    };\n}\n\nexport function useRadioGroup(\n    props: Readonly<RadioGroupProps>,\n    emitUpdate: (value: string | number | null) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-radio-group', {\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const generatedName = useId();\n    const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);\n\n    provide<RadioGroupContext>(radioGroupKey, {\n        get modelValue() {\n            return props.modelValue;\n        },\n        get name() {\n            return groupName.value;\n        },\n        get disabled() {\n            return control.disabled;\n        },\n        get required() {\n            return control.required;\n        },\n        get variant() {\n            return props.variant;\n        },\n        get color() {\n            return props.color;\n        },\n        get size() {\n            return props.size;\n        },\n        select(value) {\n            emitUpdate(value);\n        },\n    });\n\n    return {\n        control,\n        rootClass,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, rootStyle, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, rootStyle, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}
+{"version":3,"file":"radio.js","names":[],"sources":["../src/components/radio/types.ts","../src/components/radio/useRadio.ts","../src/components/radio/radio.vue","../src/components/radio/radio.vue","../src/components/radio/radio-group.vue","../src/components/radio/radio-group.vue"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { ComponentColorValue } from '../../utils/componentColors';\n\nexport type RadioColor = ComponentColorValue;\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type RadioVariant = 'solid' | 'outline';\n\nexport interface RadioProps {\n    value: string | number;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n    id?: string;\n    name?: string;\n    modelValue: string | number | null;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    ariaLabel?: string;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface RadioGroupContext {\n    modelValue: string | number | null;\n    name: string;\n    disabled: boolean;\n    required: boolean;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    select: (value: string | number) => void;\n}\n\nexport const radioGroupKey = Symbol('radioGroup') as InjectionKey<RadioGroupContext>;\n","import { computed, provide, useId, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\n\nfunction getRadioColorStyle(color: RadioProps['color']) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-radio-custom-color': customColor,\n        '--_rp-radio-custom-on-color': 'var(--rp-color-on-primary)',\n    } satisfies CSSProperties;\n}\n\nexport function useRadio(props: Readonly<RadioProps>) {\n    const group = useRequiredInject(radioGroupKey, 'RpRadio');\n    const isChecked = computed(() => group.modelValue === props.value);\n    const isDisabled = computed(() => props.disabled || group.disabled);\n    const variant = computed(() => props.variant ?? group.variant);\n    const color = computed(() => props.color ?? group.color);\n    const size = computed(() => props.size ?? group.size);\n\n    const rootClass = computed(() =>\n        bem('rp-radio', {\n            checked: isChecked.value,\n            disabled: isDisabled.value,\n            [variant.value ?? '']: Boolean(variant.value),\n            [`color-${color.value}`]: isComponentPresetColor(color.value),\n            [`size-${size.value}`]: Boolean(size.value),\n        }),\n    );\n\n    const rootStyle = computed(() => getRadioColorStyle(color.value));\n\n    function onSelect() {\n        if (isDisabled.value) return;\n        group.select(props.value);\n    }\n\n    return {\n        group,\n        isChecked,\n        isDisabled,\n        rootClass,\n        rootStyle,\n        onSelect,\n    };\n}\n\nexport function useRadioGroup(\n    props: Readonly<RadioGroupProps>,\n    emitUpdate: (value: string | number | null) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-radio-group', {\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const generatedName = useId();\n    const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);\n\n    provide<RadioGroupContext>(radioGroupKey, {\n        get modelValue() {\n            return props.modelValue;\n        },\n        get name() {\n            return groupName.value;\n        },\n        get disabled() {\n            return control.disabled;\n        },\n        get required() {\n            return control.required;\n        },\n        get variant() {\n            return props.variant;\n        },\n        get color() {\n            return props.color;\n        },\n        get size() {\n            return props.size;\n        },\n        select(value) {\n            emitUpdate(value);\n        },\n    });\n\n    return {\n        control,\n        rootClass,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, rootStyle, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, rootStyle, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

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);

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 '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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"}
+{"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.js

@@ -1,5 +1,6 @@
 import './slider.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 { n as useDelayedOpen, t as tooltip_default } from "./tooltip.js";
 import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, next, on, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setStyle, setText, setValue, template, toDisplayString, txt, unref } from "vue";

package/dist/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../src/components/slider/types.ts","../src/components/slider/useSlider.ts","../src/components/slider/slider.vue","../src/components/slider/slider.vue"],"sourcesContent":["import type { TooltipProps } from '../tooltip/types';\n\nexport const sliderColors = [\n    'primary',\n    'secondary',\n    'success',\n    'warning',\n    'danger',\n    'info',\n    'neutral',\n] as const;\n\nexport const sliderSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const sliderOrientations = ['horizontal', 'vertical'] as const;\n\nexport type SliderPresetColor = (typeof sliderColors)[number];\n\nexport type SliderColor = SliderPresetColor | (string & {});\n\nexport type SliderSize = (typeof sliderSizes)[number];\n\nexport type SliderOrientation = (typeof sliderOrientations)[number];\n\nexport type SliderValueFormatter = (value: number) => string | number;\n\nexport type SliderTooltipMode = 'hover' | 'always';\n\nexport type SliderTooltipOptions = Pick<\n    TooltipProps,\n    'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'\n> & {\n    mode?: SliderTooltipMode;\n};\n\nexport type SliderTooltip = false | SliderTooltipMode | SliderTooltipOptions;\n\nexport type SliderMarkColor = SliderColor;\n\nexport interface SliderMark {\n    value: number;\n    label?: string | number;\n    color?: SliderMarkColor;\n    hidden?: boolean;\n}\n\nexport type SliderMarkInput = number | SliderMark;\n\nexport interface SliderThumbStyle {\n    size?: number | string;\n    border?: number | string;\n    padding?: number | string;\n}\n\nexport interface SliderProps {\n    id?: string;\n    name?: string;\n    modelValue: number;\n    min?: number;\n    max?: number;\n    step?: number | 'any';\n    marks?: SliderMarkInput[];\n    thumbStyle?: SliderThumbStyle;\n    tooltip?: SliderTooltip;\n    formatValue?: SliderValueFormatter;\n    color?: SliderColor;\n    size?: SliderSize;\n    orientation?: SliderOrientation;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    valid?: boolean;\n    ariaLabel?: string;\n    ariaValueText?: string | SliderValueFormatter;\n    describedby?: string;\n    labelledby?: string;\n}\n","import { computed, type CSSProperties } from 'vue';\nimport { useDelayedOpen } from '@/composables/useDelayedOpen';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport { sliderColors } from './types';\nimport type {\n    SliderMark,\n    SliderMarkInput,\n    SliderProps,\n    SliderTooltipMode,\n    SliderTooltipOptions,\n} from './types';\n\ntype SliderStateProps = Readonly<\n    SliderProps & {\n        min: number;\n        max: number;\n        step: number | 'any';\n        tooltip: NonNullable<SliderProps['tooltip']>;\n        orientation: NonNullable<SliderProps['orientation']>;\n    }\n>;\n\nconst sliderColorNames = new Set<string>(sliderColors);\n\nconst sliderMarkColorProperties = [\n    '--_rp-slider-mark-color',\n    '--_rp-slider-mark-label-color',\n    '--_rp-slider-mark-filled-label-color',\n    '--_rp-slider-mark-ring-color',\n] as const;\n\nexport function normalizeSliderValue(\n    value: number,\n    min: number,\n    max: number,\n    step: number | 'any',\n) {\n    const bounds = normalizeSliderBounds(min, max);\n    const safeStep = normalizeSliderStep(step);\n    const safeValue = Number.isFinite(value) ? value : bounds.min;\n    const clamped = Math.min(bounds.max, Math.max(bounds.min, safeValue));\n\n    if (safeStep === 'any') return clamped;\n\n    const steps = Math.round((clamped - bounds.min) / safeStep);\n    const snapped = bounds.min + steps * safeStep;\n\n    return Math.min(bounds.max, Math.max(bounds.min, Number(snapped.toFixed(10))));\n}\n\nexport function normalizeSliderBounds(min: number, max: number) {\n    const safeMin = Number.isFinite(min) ? min : 0;\n    const safeMax = Number.isFinite(max) ? max : safeMin;\n\n    return safeMax >= safeMin ? { min: safeMin, max: safeMax } : { min: safeMax, max: safeMin };\n}\n\nexport function normalizeSliderStep(step: number | 'any') {\n    return step === 'any' || (Number.isFinite(step) && step > 0) ? step : 'any';\n}\n\nexport function getSliderValuePercent(value: number, min: number, max: number) {\n    if (max <= min) return 0;\n\n    const percent = ((value - min) / (max - min)) * 100;\n    return Math.min(100, Math.max(0, percent));\n}\n\nfunction getSliderMarkColorValue(color: SliderMark['color']) {\n    if (!color) return undefined;\n\n    return sliderColorNames.has(color) ? `var(--rp-color-${color})` : color;\n}\n\nfunction isSliderPresetColor(color: SliderProps['color']) {\n    return Boolean(color && sliderColorNames.has(color));\n}\n\nfunction getSliderCustomColorValue(color: SliderProps['color']) {\n    if (!color || isSliderPresetColor(color)) return undefined;\n\n    return color;\n}\n\nfunction setSliderStyleValue(\n    style: CSSProperties,\n    property: `--_rp-slider-${string}`,\n    value: string | undefined,\n) {\n    if (value) {\n        style[property] = value;\n    }\n}\n\nfunction getSliderMarkStyle(percent: number, color: SliderMark['color']) {\n    const style: CSSProperties = {\n        '--_rp-slider-mark-position': `${percent}%`,\n    };\n    const colorValue = getSliderMarkColorValue(color);\n\n    for (const property of sliderMarkColorProperties) {\n        setSliderStyleValue(style, property, colorValue);\n    }\n\n    return style;\n}\n\nfunction normalizeSliderMark(mark: SliderMarkInput): SliderMark {\n    return typeof mark === 'number' ? { value: mark } : mark;\n}\n\nfunction normalizeSliderMarks(\n    marks: SliderMarkInput[] | undefined,\n    min: number,\n    max: number,\n    valuePercent: number,\n) {\n    return (marks ?? []).flatMap((markInput, index) => {\n        const mark = normalizeSliderMark(markInput);\n        if (mark.hidden) return [];\n\n        const value = Number(mark.value);\n        if (!Number.isFinite(value)) return [];\n\n        const percent = getSliderValuePercent(value, min, max);\n\n        return {\n            key: `${value}-${index}`,\n            value,\n            label: mark.label,\n            hasLabel: mark.label != null,\n            filled: percent <= valuePercent,\n            style: getSliderMarkStyle(percent, mark.color),\n        };\n    });\n}\n\nfunction getSliderLengthValue(value: number | string | undefined) {\n    if (value == null || value === '') return undefined;\n    if (typeof value === 'number') return Number.isFinite(value) ? `${value}px` : undefined;\n\n    return value;\n}\n\nfunction getSliderBorderValue(value: number | string | undefined) {\n    if (value == null || value === '') return undefined;\n    if (typeof value === 'number') {\n        return Number.isFinite(value)\n            ? `${value}px solid var(--_rp-slider-thumb-border)`\n            : undefined;\n    }\n\n    return value;\n}\n\nconst sliderThumbStyleProps = [\n    ['--_rp-slider-thumb-size', 'size', getSliderLengthValue],\n    ['--_rp-slider-thumb-border-style', 'border', getSliderBorderValue],\n    ['--_rp-slider-thumb-padding', 'padding', getSliderLengthValue],\n] as const;\n\nfunction getSliderTrackStyle(props: SliderStateProps, valuePercent: number) {\n    const style: CSSProperties = {\n        '--_rp-slider-percent': `${valuePercent}%`,\n        '--_rp-slider-ratio': `${valuePercent / 100}`,\n    };\n\n    setSliderStyleValue(style, '--_rp-slider-custom-color', getSliderCustomColorValue(props.color));\n\n    for (const [property, propName, getValue] of sliderThumbStyleProps) {\n        setSliderStyleValue(style, property, getValue(props.thumbStyle?.[propName]));\n    }\n\n    return style;\n}\n\nfunction getFormattedSliderValue(value: number, formatter: SliderProps['formatValue']) {\n    return formatter ? formatter(value) : value;\n}\n\nfunction getSliderAriaValueText(\n    value: number,\n    ariaValueText: SliderProps['ariaValueText'],\n    formatter: SliderProps['formatValue'],\n) {\n    if (typeof ariaValueText === 'function') return String(ariaValueText(value));\n    if (ariaValueText != null && ariaValueText !== '') return String(ariaValueText);\n    if (formatter) return String(formatter(value));\n\n    return undefined;\n}\n\nfunction getSliderTooltipOptions(\n    tooltip: NonNullable<SliderProps['tooltip']>,\n): SliderTooltipOptions {\n    return typeof tooltip === 'object' ? tooltip : {};\n}\n\nfunction getSliderTooltipMode(\n    tooltip: NonNullable<SliderProps['tooltip']>,\n): SliderTooltipMode | false {\n    if (tooltip === false) return false;\n    if (typeof tooltip === 'object') return tooltip.mode ?? 'hover';\n\n    return tooltip;\n}\n\nexport function useSlider(props: SliderStateProps, emitUpdate: (value: number) => void) {\n    const control = useControlState(props);\n\n    const bounds = computed(() => normalizeSliderBounds(props.min, props.max));\n    const nativeStep = computed(() => normalizeSliderStep(props.step));\n\n    const normalizedValue = computed(() =>\n        normalizeSliderValue(\n            props.modelValue,\n            bounds.value.min,\n            bounds.value.max,\n            nativeStep.value,\n        ),\n    );\n\n    const valuePercent = computed(() =>\n        getSliderValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max),\n    );\n\n    const formattedValue = computed(() =>\n        getFormattedSliderValue(normalizedValue.value, props.formatValue),\n    );\n\n    const ariaValueText = computed(() =>\n        getSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue),\n    );\n\n    const markItems = computed(() =>\n        normalizeSliderMarks(props.marks, bounds.value.min, bounds.value.max, valuePercent.value),\n    );\n\n    const tooltipOptions = computed(() => getSliderTooltipOptions(props.tooltip));\n    const tooltipMode = computed(() => getSliderTooltipMode(props.tooltip));\n    const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);\n    const {\n        isOpen: delayedTooltipOpen,\n        open: openDelayedTooltip,\n        closeImmediate: closeDelayedTooltip,\n    } = useDelayedOpen({\n        openDelay: () => tooltipOpenDelay.value,\n        disabled: () => tooltipMode.value !== 'hover' || control.disabled,\n    });\n\n    const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));\n    const tooltipVisible = computed(() => tooltipMode.value !== false);\n    const tooltipAlwaysVisible = computed(() => tooltipMode.value === 'always');\n    const tooltipOpen = computed(\n        () =>\n            tooltipAlwaysVisible.value ||\n            (tooltipMode.value === 'hover' && delayedTooltipOpen.value && !control.disabled),\n    );\n    const tooltipPlacement = computed(\n        () => tooltipOptions.value.placement ?? (props.orientation === 'vertical' ? 'left' : 'top'),\n    );\n    const tooltipId = computed(() => tooltipOptions.value.id);\n    const tooltipColor = computed(() => tooltipOptions.value.color);\n    const tooltipOffset = computed(() => tooltipOptions.value.offset);\n    const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);\n    const tooltipContent = computed(() => String(formattedValue.value));\n\n    const rootClass = computed(() =>\n        bem('rp-slider', {\n            [`color-${props.color}`]: isSliderPresetColor(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n            vertical: props.orientation === 'vertical',\n            marked: markItems.value.length > 0,\n            'marks-with-labels': hasMarkLabels.value,\n            'tooltip-always-visible': tooltipAlwaysVisible.value,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n        }),\n    );\n\n    const trackStyle = computed<CSSProperties>(() =>\n        getSliderTrackStyle(props, valuePercent.value),\n    );\n\n    function onInput(e: Event) {\n        if (control.disabled) return;\n\n        const input = e.target as HTMLInputElement;\n        emitUpdate(\n            normalizeSliderValue(\n                input.valueAsNumber,\n                bounds.value.min,\n                bounds.value.max,\n                nativeStep.value,\n            ),\n        );\n    }\n\n    function openTooltip() {\n        if (tooltipMode.value === 'hover' && !control.disabled) openDelayedTooltip();\n    }\n\n    function closeTooltip() {\n        closeDelayedTooltip();\n    }\n\n    function onTooltipKeydown(event: KeyboardEvent) {\n        if (event.key === 'Escape') closeTooltip();\n    }\n\n    return {\n        control,\n        nativeMin: computed(() => bounds.value.min),\n        nativeMax: computed(() => bounds.value.max),\n        nativeStep,\n        rootClass,\n        normalizedValue,\n        valuePercent,\n        formattedValue,\n        ariaValueText,\n        markItems,\n        trackStyle,\n        tooltipVisible,\n        tooltipOpen,\n        tooltipPlacement,\n        tooltipId,\n        tooltipColor,\n        tooltipOffset,\n        tooltipOpenDelay,\n        tooltipArrow,\n        tooltipContent,\n        onInput,\n        openTooltip,\n        closeTooltip,\n        onTooltipKeydown,\n    };\n}\n","<template>\n    <label\n        :class=\"[rootClass, { 'rp-slider--custom-thumb': $slots.thumb }]\"\n        :data-disabled=\"control.disabled || undefined\"\n        :style=\"trackStyle\"\n    >\n        <span v-if=\"$slots.default || $slots.value\" class=\"rp-slider__header\">\n            <span v-if=\"$slots.default\" class=\"rp-slider__label\">\n                <slot />\n            </span>\n            <span v-if=\"$slots.value\" class=\"rp-slider__value\" aria-hidden=\"true\">\n                <slot\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n            </span>\n        </span>\n        <span\n            class=\"rp-slider__track\"\n            @mouseenter=\"openTooltip\"\n            @mouseleave=\"closeTooltip\"\n            @focusin=\"openTooltip\"\n            @focusout=\"closeTooltip\"\n            @keydown=\"onTooltipKeydown\"\n        >\n            <span class=\"rp-slider__bar\" aria-hidden=\"true\" />\n\n            <input\n                :id=\"control.id\"\n                :name=\"name\"\n                class=\"rp-slider__native\"\n                type=\"range\"\n                :value=\"normalizedValue\"\n                :min=\"nativeMin\"\n                :max=\"nativeMax\"\n                :step=\"nativeStep\"\n                :orient=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :disabled=\"control.disabled || undefined\"\n                :required=\"control.required || undefined\"\n                :aria-label=\"ariaLabel || undefined\"\n                :aria-labelledby=\"control.ariaLabelledby\"\n                :aria-describedby=\"control.ariaDescribedby\"\n                :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :aria-invalid=\"control.invalid || undefined\"\n                :aria-required=\"control.required || undefined\"\n                :aria-valuetext=\"ariaValueText\"\n                @input=\"onInput\"\n            />\n\n            <span v-if=\"markItems.length\" class=\"rp-slider__marks\" aria-hidden=\"true\">\n                <span\n                    v-for=\"mark in markItems\"\n                    :key=\"mark.key\"\n                    class=\"rp-slider__mark\"\n                    :class=\"{ 'rp-slider__mark--filled': mark.filled }\"\n                    :style=\"mark.style\"\n                >\n                    <span class=\"rp-slider__mark-dot\" />\n                    <span v-if=\"mark.hasLabel\" class=\"rp-slider__mark-label\">\n                        {{ mark.label }}\n                    </span>\n                </span>\n            </span>\n\n            <span v-if=\"$slots.thumb\" class=\"rp-slider__thumb\" aria-hidden=\"true\">\n                <span class=\"rp-slider__thumb-content\">\n                    <slot\n                        name=\"thumb\"\n                        :value=\"normalizedValue\"\n                        :formatted-value=\"formattedValue\"\n                        :percent=\"valuePercent\"\n                    />\n                </span>\n            </span>\n\n            <Tooltip\n                v-if=\"tooltipVisible\"\n                :id=\"tooltipId\"\n                class=\"rp-slider__tooltip\"\n                :content=\"tooltipContent\"\n                :placement=\"tooltipPlacement\"\n                :color=\"tooltipColor\"\n                :offset=\"tooltipOffset\"\n                :open=\"tooltipOpen\"\n                :open-delay=\"tooltipOpenDelay\"\n                :arrow=\"tooltipArrow\"\n                decorative\n            >\n                <span class=\"rp-slider__tooltip-anchor\" aria-hidden=\"true\" />\n            </Tooltip>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport Tooltip from '../tooltip/tooltip.vue';\nimport type { SliderProps } from './types';\nimport { useSlider } from './useSlider';\n\ndefineOptions({ name: 'RpSlider' });\n\nconst props = withDefaults(defineProps<SliderProps>(), {\n    min: 0,\n    max: 100,\n    step: 1,\n    marks: () => [],\n    tooltip: 'hover',\n    orientation: 'horizontal',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: number];\n}>();\n\nconst {\n    control,\n    nativeMin,\n    nativeMax,\n    nativeStep,\n    rootClass,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    markItems,\n    trackStyle,\n    tooltipVisible,\n    tooltipOpen,\n    tooltipPlacement,\n    tooltipId,\n    tooltipColor,\n    tooltipOffset,\n    tooltipOpenDelay,\n    tooltipArrow,\n    tooltipContent,\n    onInput,\n    openTooltip,\n    closeTooltip,\n    onTooltipKeydown,\n} = useSlider(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./slider.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"[rootClass, { 'rp-slider--custom-thumb': $slots.thumb }]\"\n        :data-disabled=\"control.disabled || undefined\"\n        :style=\"trackStyle\"\n    >\n        <span v-if=\"$slots.default || $slots.value\" class=\"rp-slider__header\">\n            <span v-if=\"$slots.default\" class=\"rp-slider__label\">\n                <slot />\n            </span>\n            <span v-if=\"$slots.value\" class=\"rp-slider__value\" aria-hidden=\"true\">\n                <slot\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n            </span>\n        </span>\n        <span\n            class=\"rp-slider__track\"\n            @mouseenter=\"openTooltip\"\n            @mouseleave=\"closeTooltip\"\n            @focusin=\"openTooltip\"\n            @focusout=\"closeTooltip\"\n            @keydown=\"onTooltipKeydown\"\n        >\n            <span class=\"rp-slider__bar\" aria-hidden=\"true\" />\n\n            <input\n                :id=\"control.id\"\n                :name=\"name\"\n                class=\"rp-slider__native\"\n                type=\"range\"\n                :value=\"normalizedValue\"\n                :min=\"nativeMin\"\n                :max=\"nativeMax\"\n                :step=\"nativeStep\"\n                :orient=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :disabled=\"control.disabled || undefined\"\n                :required=\"control.required || undefined\"\n                :aria-label=\"ariaLabel || undefined\"\n                :aria-labelledby=\"control.ariaLabelledby\"\n                :aria-describedby=\"control.ariaDescribedby\"\n                :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :aria-invalid=\"control.invalid || undefined\"\n                :aria-required=\"control.required || undefined\"\n                :aria-valuetext=\"ariaValueText\"\n                @input=\"onInput\"\n            />\n\n            <span v-if=\"markItems.length\" class=\"rp-slider__marks\" aria-hidden=\"true\">\n                <span\n                    v-for=\"mark in markItems\"\n                    :key=\"mark.key\"\n                    class=\"rp-slider__mark\"\n                    :class=\"{ 'rp-slider__mark--filled': mark.filled }\"\n                    :style=\"mark.style\"\n                >\n                    <span class=\"rp-slider__mark-dot\" />\n                    <span v-if=\"mark.hasLabel\" class=\"rp-slider__mark-label\">\n                        {{ mark.label }}\n                    </span>\n                </span>\n            </span>\n\n            <span v-if=\"$slots.thumb\" class=\"rp-slider__thumb\" aria-hidden=\"true\">\n                <span class=\"rp-slider__thumb-content\">\n                    <slot\n                        name=\"thumb\"\n                        :value=\"normalizedValue\"\n                        :formatted-value=\"formattedValue\"\n                        :percent=\"valuePercent\"\n                    />\n                </span>\n            </span>\n\n            <Tooltip\n                v-if=\"tooltipVisible\"\n                :id=\"tooltipId\"\n                class=\"rp-slider__tooltip\"\n                :content=\"tooltipContent\"\n                :placement=\"tooltipPlacement\"\n                :color=\"tooltipColor\"\n                :offset=\"tooltipOffset\"\n                :open=\"tooltipOpen\"\n                :open-delay=\"tooltipOpenDelay\"\n                :arrow=\"tooltipArrow\"\n                decorative\n            >\n                <span class=\"rp-slider__tooltip-anchor\" aria-hidden=\"true\" />\n            </Tooltip>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport Tooltip from '../tooltip/tooltip.vue';\nimport type { SliderProps } from './types';\nimport { useSlider } from './useSlider';\n\ndefineOptions({ name: 'RpSlider' });\n\nconst props = withDefaults(defineProps<SliderProps>(), {\n    min: 0,\n    max: 100,\n    step: 1,\n    marks: () => [],\n    tooltip: 'hover',\n    orientation: 'horizontal',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: number];\n}>();\n\nconst {\n    control,\n    nativeMin,\n    nativeMax,\n    nativeStep,\n    rootClass,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    markItems,\n    trackStyle,\n    tooltipVisible,\n    tooltipOpen,\n    tooltipPlacement,\n    tooltipId,\n    tooltipColor,\n    tooltipOffset,\n    tooltipOpenDelay,\n    tooltipArrow,\n    tooltipContent,\n    onInput,\n    openTooltip,\n    closeTooltip,\n    onTooltipKeydown,\n} = useSlider(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./slider.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}
+{"version":3,"file":"slider.js","names":[],"sources":["../src/components/slider/types.ts","../src/components/slider/useSlider.ts","../src/components/slider/slider.vue","../src/components/slider/slider.vue"],"sourcesContent":["import type { TooltipProps } from '../tooltip/types';\n\nexport const sliderColors = [\n    'primary',\n    'secondary',\n    'success',\n    'warning',\n    'danger',\n    'info',\n    'neutral',\n] as const;\n\nexport const sliderSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const sliderOrientations = ['horizontal', 'vertical'] as const;\n\nexport type SliderPresetColor = (typeof sliderColors)[number];\n\nexport type SliderColor = SliderPresetColor | (string & {});\n\nexport type SliderSize = (typeof sliderSizes)[number];\n\nexport type SliderOrientation = (typeof sliderOrientations)[number];\n\nexport type SliderValueFormatter = (value: number) => string | number;\n\nexport type SliderTooltipMode = 'hover' | 'always';\n\nexport type SliderTooltipOptions = Pick<\n    TooltipProps,\n    'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'\n> & {\n    mode?: SliderTooltipMode;\n};\n\nexport type SliderTooltip = false | SliderTooltipMode | SliderTooltipOptions;\n\nexport type SliderMarkColor = SliderColor;\n\nexport interface SliderMark {\n    value: number;\n    label?: string | number;\n    color?: SliderMarkColor;\n    hidden?: boolean;\n}\n\nexport type SliderMarkInput = number | SliderMark;\n\nexport interface SliderThumbStyle {\n    size?: number | string;\n    border?: number | string;\n    padding?: number | string;\n}\n\nexport interface SliderProps {\n    id?: string;\n    name?: string;\n    modelValue: number;\n    min?: number;\n    max?: number;\n    step?: number | 'any';\n    marks?: SliderMarkInput[];\n    thumbStyle?: SliderThumbStyle;\n    tooltip?: SliderTooltip;\n    formatValue?: SliderValueFormatter;\n    color?: SliderColor;\n    size?: SliderSize;\n    orientation?: SliderOrientation;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    valid?: boolean;\n    ariaLabel?: string;\n    ariaValueText?: string | SliderValueFormatter;\n    describedby?: string;\n    labelledby?: string;\n}\n","import { computed, type CSSProperties } from 'vue';\nimport { useDelayedOpen } from '@/composables/useDelayedOpen';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport { sliderColors } from './types';\nimport type {\n    SliderMark,\n    SliderMarkInput,\n    SliderProps,\n    SliderTooltipMode,\n    SliderTooltipOptions,\n} from './types';\n\ntype SliderStateProps = Readonly<\n    SliderProps & {\n        min: number;\n        max: number;\n        step: number | 'any';\n        tooltip: NonNullable<SliderProps['tooltip']>;\n        orientation: NonNullable<SliderProps['orientation']>;\n    }\n>;\n\nconst sliderColorNames = new Set<string>(sliderColors);\n\nconst sliderMarkColorProperties = [\n    '--_rp-slider-mark-color',\n    '--_rp-slider-mark-label-color',\n    '--_rp-slider-mark-filled-label-color',\n    '--_rp-slider-mark-ring-color',\n] as const;\n\nexport function normalizeSliderValue(\n    value: number,\n    min: number,\n    max: number,\n    step: number | 'any',\n) {\n    const bounds = normalizeSliderBounds(min, max);\n    const safeStep = normalizeSliderStep(step);\n    const safeValue = Number.isFinite(value) ? value : bounds.min;\n    const clamped = Math.min(bounds.max, Math.max(bounds.min, safeValue));\n\n    if (safeStep === 'any') return clamped;\n\n    const steps = Math.round((clamped - bounds.min) / safeStep);\n    const snapped = bounds.min + steps * safeStep;\n\n    return Math.min(bounds.max, Math.max(bounds.min, Number(snapped.toFixed(10))));\n}\n\nexport function normalizeSliderBounds(min: number, max: number) {\n    const safeMin = Number.isFinite(min) ? min : 0;\n    const safeMax = Number.isFinite(max) ? max : safeMin;\n\n    return safeMax >= safeMin ? { min: safeMin, max: safeMax } : { min: safeMax, max: safeMin };\n}\n\nexport function normalizeSliderStep(step: number | 'any') {\n    return step === 'any' || (Number.isFinite(step) && step > 0) ? step : 'any';\n}\n\nexport function getSliderValuePercent(value: number, min: number, max: number) {\n    if (max <= min) return 0;\n\n    const percent = ((value - min) / (max - min)) * 100;\n    return Math.min(100, Math.max(0, percent));\n}\n\nfunction getSliderMarkColorValue(color: SliderMark['color']) {\n    if (!color) return undefined;\n\n    return sliderColorNames.has(color) ? `var(--rp-color-${color})` : color;\n}\n\nfunction isSliderPresetColor(color: SliderProps['color']) {\n    return Boolean(color && sliderColorNames.has(color));\n}\n\nfunction getSliderCustomColorValue(color: SliderProps['color']) {\n    if (!color || isSliderPresetColor(color)) return undefined;\n\n    return color;\n}\n\nfunction setSliderStyleValue(\n    style: CSSProperties,\n    property: `--_rp-slider-${string}`,\n    value: string | undefined,\n) {\n    if (value) {\n        style[property] = value;\n    }\n}\n\nfunction getSliderMarkStyle(percent: number, color: SliderMark['color']) {\n    const style: CSSProperties = {\n        '--_rp-slider-mark-position': `${percent}%`,\n    };\n    const colorValue = getSliderMarkColorValue(color);\n\n    for (const property of sliderMarkColorProperties) {\n        setSliderStyleValue(style, property, colorValue);\n    }\n\n    return style;\n}\n\nfunction normalizeSliderMark(mark: SliderMarkInput): SliderMark {\n    return typeof mark === 'number' ? { value: mark } : mark;\n}\n\nfunction normalizeSliderMarks(\n    marks: SliderMarkInput[] | undefined,\n    min: number,\n    max: number,\n    valuePercent: number,\n) {\n    return (marks ?? []).flatMap((markInput, index) => {\n        const mark = normalizeSliderMark(markInput);\n        if (mark.hidden) return [];\n\n        const value = Number(mark.value);\n        if (!Number.isFinite(value)) return [];\n\n        const percent = getSliderValuePercent(value, min, max);\n\n        return {\n            key: `${value}-${index}`,\n            value,\n            label: mark.label,\n            hasLabel: mark.label != null,\n            filled: percent <= valuePercent,\n            style: getSliderMarkStyle(percent, mark.color),\n        };\n    });\n}\n\nfunction getSliderLengthValue(value: number | string | undefined) {\n    if (value == null || value === '') return undefined;\n    if (typeof value === 'number') return Number.isFinite(value) ? `${value}px` : undefined;\n\n    return value;\n}\n\nfunction getSliderBorderValue(value: number | string | undefined) {\n    if (value == null || value === '') return undefined;\n    if (typeof value === 'number') {\n        return Number.isFinite(value)\n            ? `${value}px solid var(--_rp-slider-thumb-border)`\n            : undefined;\n    }\n\n    return value;\n}\n\nconst sliderThumbStyleProps = [\n    ['--_rp-slider-thumb-size', 'size', getSliderLengthValue],\n    ['--_rp-slider-thumb-border-style', 'border', getSliderBorderValue],\n    ['--_rp-slider-thumb-padding', 'padding', getSliderLengthValue],\n] as const;\n\nfunction getSliderTrackStyle(props: SliderStateProps, valuePercent: number) {\n    const style: CSSProperties = {\n        '--_rp-slider-percent': `${valuePercent}%`,\n        '--_rp-slider-ratio': `${valuePercent / 100}`,\n    };\n\n    setSliderStyleValue(style, '--_rp-slider-custom-color', getSliderCustomColorValue(props.color));\n\n    for (const [property, propName, getValue] of sliderThumbStyleProps) {\n        setSliderStyleValue(style, property, getValue(props.thumbStyle?.[propName]));\n    }\n\n    return style;\n}\n\nfunction getFormattedSliderValue(value: number, formatter: SliderProps['formatValue']) {\n    return formatter ? formatter(value) : value;\n}\n\nfunction getSliderAriaValueText(\n    value: number,\n    ariaValueText: SliderProps['ariaValueText'],\n    formatter: SliderProps['formatValue'],\n) {\n    if (typeof ariaValueText === 'function') return String(ariaValueText(value));\n    if (ariaValueText != null && ariaValueText !== '') return String(ariaValueText);\n    if (formatter) return String(formatter(value));\n\n    return undefined;\n}\n\nfunction getSliderTooltipOptions(\n    tooltip: NonNullable<SliderProps['tooltip']>,\n): SliderTooltipOptions {\n    return typeof tooltip === 'object' ? tooltip : {};\n}\n\nfunction getSliderTooltipMode(\n    tooltip: NonNullable<SliderProps['tooltip']>,\n): SliderTooltipMode | false {\n    if (tooltip === false) return false;\n    if (typeof tooltip === 'object') return tooltip.mode ?? 'hover';\n\n    return tooltip;\n}\n\nexport function useSlider(props: SliderStateProps, emitUpdate: (value: number) => void) {\n    const control = useControlState(props);\n\n    const bounds = computed(() => normalizeSliderBounds(props.min, props.max));\n    const nativeStep = computed(() => normalizeSliderStep(props.step));\n\n    const normalizedValue = computed(() =>\n        normalizeSliderValue(\n            props.modelValue,\n            bounds.value.min,\n            bounds.value.max,\n            nativeStep.value,\n        ),\n    );\n\n    const valuePercent = computed(() =>\n        getSliderValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max),\n    );\n\n    const formattedValue = computed(() =>\n        getFormattedSliderValue(normalizedValue.value, props.formatValue),\n    );\n\n    const ariaValueText = computed(() =>\n        getSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue),\n    );\n\n    const markItems = computed(() =>\n        normalizeSliderMarks(props.marks, bounds.value.min, bounds.value.max, valuePercent.value),\n    );\n\n    const tooltipOptions = computed(() => getSliderTooltipOptions(props.tooltip));\n    const tooltipMode = computed(() => getSliderTooltipMode(props.tooltip));\n    const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);\n    const {\n        isOpen: delayedTooltipOpen,\n        open: openDelayedTooltip,\n        closeImmediate: closeDelayedTooltip,\n    } = useDelayedOpen({\n        openDelay: () => tooltipOpenDelay.value,\n        disabled: () => tooltipMode.value !== 'hover' || control.disabled,\n    });\n\n    const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));\n    const tooltipVisible = computed(() => tooltipMode.value !== false);\n    const tooltipAlwaysVisible = computed(() => tooltipMode.value === 'always');\n    const tooltipOpen = computed(\n        () =>\n            tooltipAlwaysVisible.value ||\n            (tooltipMode.value === 'hover' && delayedTooltipOpen.value && !control.disabled),\n    );\n    const tooltipPlacement = computed(\n        () => tooltipOptions.value.placement ?? (props.orientation === 'vertical' ? 'left' : 'top'),\n    );\n    const tooltipId = computed(() => tooltipOptions.value.id);\n    const tooltipColor = computed(() => tooltipOptions.value.color);\n    const tooltipOffset = computed(() => tooltipOptions.value.offset);\n    const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);\n    const tooltipContent = computed(() => String(formattedValue.value));\n\n    const rootClass = computed(() =>\n        bem('rp-slider', {\n            [`color-${props.color}`]: isSliderPresetColor(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n            vertical: props.orientation === 'vertical',\n            marked: markItems.value.length > 0,\n            'marks-with-labels': hasMarkLabels.value,\n            'tooltip-always-visible': tooltipAlwaysVisible.value,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n        }),\n    );\n\n    const trackStyle = computed<CSSProperties>(() =>\n        getSliderTrackStyle(props, valuePercent.value),\n    );\n\n    function onInput(e: Event) {\n        if (control.disabled) return;\n\n        const input = e.target as HTMLInputElement;\n        emitUpdate(\n            normalizeSliderValue(\n                input.valueAsNumber,\n                bounds.value.min,\n                bounds.value.max,\n                nativeStep.value,\n            ),\n        );\n    }\n\n    function openTooltip() {\n        if (tooltipMode.value === 'hover' && !control.disabled) openDelayedTooltip();\n    }\n\n    function closeTooltip() {\n        closeDelayedTooltip();\n    }\n\n    function onTooltipKeydown(event: KeyboardEvent) {\n        if (event.key === 'Escape') closeTooltip();\n    }\n\n    return {\n        control,\n        nativeMin: computed(() => bounds.value.min),\n        nativeMax: computed(() => bounds.value.max),\n        nativeStep,\n        rootClass,\n        normalizedValue,\n        valuePercent,\n        formattedValue,\n        ariaValueText,\n        markItems,\n        trackStyle,\n        tooltipVisible,\n        tooltipOpen,\n        tooltipPlacement,\n        tooltipId,\n        tooltipColor,\n        tooltipOffset,\n        tooltipOpenDelay,\n        tooltipArrow,\n        tooltipContent,\n        onInput,\n        openTooltip,\n        closeTooltip,\n        onTooltipKeydown,\n    };\n}\n","<template>\n    <label\n        :class=\"[rootClass, { 'rp-slider--custom-thumb': $slots.thumb }]\"\n        :data-disabled=\"control.disabled || undefined\"\n        :style=\"trackStyle\"\n    >\n        <span v-if=\"$slots.default || $slots.value\" class=\"rp-slider__header\">\n            <span v-if=\"$slots.default\" class=\"rp-slider__label\">\n                <slot />\n            </span>\n            <span v-if=\"$slots.value\" class=\"rp-slider__value\" aria-hidden=\"true\">\n                <slot\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n            </span>\n        </span>\n        <span\n            class=\"rp-slider__track\"\n            @mouseenter=\"openTooltip\"\n            @mouseleave=\"closeTooltip\"\n            @focusin=\"openTooltip\"\n            @focusout=\"closeTooltip\"\n            @keydown=\"onTooltipKeydown\"\n        >\n            <span class=\"rp-slider__bar\" aria-hidden=\"true\" />\n\n            <input\n                :id=\"control.id\"\n                :name=\"name\"\n                class=\"rp-slider__native\"\n                type=\"range\"\n                :value=\"normalizedValue\"\n                :min=\"nativeMin\"\n                :max=\"nativeMax\"\n                :step=\"nativeStep\"\n                :orient=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :disabled=\"control.disabled || undefined\"\n                :required=\"control.required || undefined\"\n                :aria-label=\"ariaLabel || undefined\"\n                :aria-labelledby=\"control.ariaLabelledby\"\n                :aria-describedby=\"control.ariaDescribedby\"\n                :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :aria-invalid=\"control.invalid || undefined\"\n                :aria-required=\"control.required || undefined\"\n                :aria-valuetext=\"ariaValueText\"\n                @input=\"onInput\"\n            />\n\n            <span v-if=\"markItems.length\" class=\"rp-slider__marks\" aria-hidden=\"true\">\n                <span\n                    v-for=\"mark in markItems\"\n                    :key=\"mark.key\"\n                    class=\"rp-slider__mark\"\n                    :class=\"{ 'rp-slider__mark--filled': mark.filled }\"\n                    :style=\"mark.style\"\n                >\n                    <span class=\"rp-slider__mark-dot\" />\n                    <span v-if=\"mark.hasLabel\" class=\"rp-slider__mark-label\">\n                        {{ mark.label }}\n                    </span>\n                </span>\n            </span>\n\n            <span v-if=\"$slots.thumb\" class=\"rp-slider__thumb\" aria-hidden=\"true\">\n                <span class=\"rp-slider__thumb-content\">\n                    <slot\n                        name=\"thumb\"\n                        :value=\"normalizedValue\"\n                        :formatted-value=\"formattedValue\"\n                        :percent=\"valuePercent\"\n                    />\n                </span>\n            </span>\n\n            <Tooltip\n                v-if=\"tooltipVisible\"\n                :id=\"tooltipId\"\n                class=\"rp-slider__tooltip\"\n                :content=\"tooltipContent\"\n                :placement=\"tooltipPlacement\"\n                :color=\"tooltipColor\"\n                :offset=\"tooltipOffset\"\n                :open=\"tooltipOpen\"\n                :open-delay=\"tooltipOpenDelay\"\n                :arrow=\"tooltipArrow\"\n                decorative\n            >\n                <span class=\"rp-slider__tooltip-anchor\" aria-hidden=\"true\" />\n            </Tooltip>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport Tooltip from '../tooltip/tooltip.vue';\nimport type { SliderProps } from './types';\nimport { useSlider } from './useSlider';\n\ndefineOptions({ name: 'RpSlider' });\n\nconst props = withDefaults(defineProps<SliderProps>(), {\n    min: 0,\n    max: 100,\n    step: 1,\n    marks: () => [],\n    tooltip: 'hover',\n    orientation: 'horizontal',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: number];\n}>();\n\nconst {\n    control,\n    nativeMin,\n    nativeMax,\n    nativeStep,\n    rootClass,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    markItems,\n    trackStyle,\n    tooltipVisible,\n    tooltipOpen,\n    tooltipPlacement,\n    tooltipId,\n    tooltipColor,\n    tooltipOffset,\n    tooltipOpenDelay,\n    tooltipArrow,\n    tooltipContent,\n    onInput,\n    openTooltip,\n    closeTooltip,\n    onTooltipKeydown,\n} = useSlider(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./slider.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"[rootClass, { 'rp-slider--custom-thumb': $slots.thumb }]\"\n        :data-disabled=\"control.disabled || undefined\"\n        :style=\"trackStyle\"\n    >\n        <span v-if=\"$slots.default || $slots.value\" class=\"rp-slider__header\">\n            <span v-if=\"$slots.default\" class=\"rp-slider__label\">\n                <slot />\n            </span>\n            <span v-if=\"$slots.value\" class=\"rp-slider__value\" aria-hidden=\"true\">\n                <slot\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n            </span>\n        </span>\n        <span\n            class=\"rp-slider__track\"\n            @mouseenter=\"openTooltip\"\n            @mouseleave=\"closeTooltip\"\n            @focusin=\"openTooltip\"\n            @focusout=\"closeTooltip\"\n            @keydown=\"onTooltipKeydown\"\n        >\n            <span class=\"rp-slider__bar\" aria-hidden=\"true\" />\n\n            <input\n                :id=\"control.id\"\n                :name=\"name\"\n                class=\"rp-slider__native\"\n                type=\"range\"\n                :value=\"normalizedValue\"\n                :min=\"nativeMin\"\n                :max=\"nativeMax\"\n                :step=\"nativeStep\"\n                :orient=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :disabled=\"control.disabled || undefined\"\n                :required=\"control.required || undefined\"\n                :aria-label=\"ariaLabel || undefined\"\n                :aria-labelledby=\"control.ariaLabelledby\"\n                :aria-describedby=\"control.ariaDescribedby\"\n                :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n                :aria-invalid=\"control.invalid || undefined\"\n                :aria-required=\"control.required || undefined\"\n                :aria-valuetext=\"ariaValueText\"\n                @input=\"onInput\"\n            />\n\n            <span v-if=\"markItems.length\" class=\"rp-slider__marks\" aria-hidden=\"true\">\n                <span\n                    v-for=\"mark in markItems\"\n                    :key=\"mark.key\"\n                    class=\"rp-slider__mark\"\n                    :class=\"{ 'rp-slider__mark--filled': mark.filled }\"\n                    :style=\"mark.style\"\n                >\n                    <span class=\"rp-slider__mark-dot\" />\n                    <span v-if=\"mark.hasLabel\" class=\"rp-slider__mark-label\">\n                        {{ mark.label }}\n                    </span>\n                </span>\n            </span>\n\n            <span v-if=\"$slots.thumb\" class=\"rp-slider__thumb\" aria-hidden=\"true\">\n                <span class=\"rp-slider__thumb-content\">\n                    <slot\n                        name=\"thumb\"\n                        :value=\"normalizedValue\"\n                        :formatted-value=\"formattedValue\"\n                        :percent=\"valuePercent\"\n                    />\n                </span>\n            </span>\n\n            <Tooltip\n                v-if=\"tooltipVisible\"\n                :id=\"tooltipId\"\n                class=\"rp-slider__tooltip\"\n                :content=\"tooltipContent\"\n                :placement=\"tooltipPlacement\"\n                :color=\"tooltipColor\"\n                :offset=\"tooltipOffset\"\n                :open=\"tooltipOpen\"\n                :open-delay=\"tooltipOpenDelay\"\n                :arrow=\"tooltipArrow\"\n                decorative\n            >\n                <span class=\"rp-slider__tooltip-anchor\" aria-hidden=\"true\" />\n            </Tooltip>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport Tooltip from '../tooltip/tooltip.vue';\nimport type { SliderProps } from './types';\nimport { useSlider } from './useSlider';\n\ndefineOptions({ name: 'RpSlider' });\n\nconst props = withDefaults(defineProps<SliderProps>(), {\n    min: 0,\n    max: 100,\n    step: 1,\n    marks: () => [],\n    tooltip: 'hover',\n    orientation: 'horizontal',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: number];\n}>();\n\nconst {\n    control,\n    nativeMin,\n    nativeMax,\n    nativeStep,\n    rootClass,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    markItems,\n    trackStyle,\n    tooltipVisible,\n    tooltipOpen,\n    tooltipPlacement,\n    tooltipId,\n    tooltipColor,\n    tooltipOffset,\n    tooltipOpenDelay,\n    tooltipArrow,\n    tooltipContent,\n    onInput,\n    openTooltip,\n    closeTooltip,\n    onTooltipKeydown,\n} = useSlider(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./slider.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/switch.js

@@ -1,6 +1,7 @@
 import './switch.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/components/switch/useSwitch.ts","../src/components/switch/switch.vue","../src/components/switch/switch.vue"],"sourcesContent":["import { computed, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { SwitchProps } from './types';\n\nfunction getSwitchColorStyle(color: SwitchProps['color']) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-switch-custom-color': customColor,\n    } satisfies CSSProperties;\n}\n\nexport function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-switch', {\n            checked: props.modelValue,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [`color-${props.color}`]: isComponentPresetColor(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n        }),\n    );\n\n    const rootStyle = computed(() => getSwitchColorStyle(props.color));\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        rootStyle,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;AAMA,SAAS,oBAAoB,OAA6B;CACtD,MAAM,cAAc,wBAAwB,KAAK;CACjD,IAAI,CAAC,aAAa,OAAO,KAAA;CAEzB,OAAO,EACH,6BAA6B,YACjC;AACJ;AAEA,SAAgB,UAAU,OAA8B,YAAsC;CAC1F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,aAAa;EACb,SAAS,MAAM;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,SAAS,MAAM,UAAU,uBAAuB,MAAM,KAAK;GAC3D,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;CAC9C,CAAC,CACL;CAEA,MAAM,YAAY,eAAe,oBAAoB,MAAM,KAAK,CAAC;CAEjE,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECDA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,WAAW,aAAa,UAAU,QAAQ,UAAU;GAC5E,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;SA7BY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;gBApBb,MAAA,SAAA,CAAS;gBACT,MAAA,SAAA,CAAS;eAChB,iBAAe,qBAAoB,KAAA,CAAS;eAC5C,cAAY,cAAU,YAAA,WAAA;eAGlB,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAIV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,gBAAc,WAAU;eACxB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAMrC,OAAM,eAAA"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/components/switch/useSwitch.ts","../src/components/switch/switch.vue","../src/components/switch/switch.vue"],"sourcesContent":["import { computed, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { SwitchProps } from './types';\n\nfunction getSwitchColorStyle(color: SwitchProps['color']) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-switch-custom-color': customColor,\n    } satisfies CSSProperties;\n}\n\nexport function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-switch', {\n            checked: props.modelValue,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [`color-${props.color}`]: isComponentPresetColor(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n        }),\n    );\n\n    const rootStyle = computed(() => getSwitchColorStyle(props.color));\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        rootStyle,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;AAMA,SAAS,oBAAoB,OAA6B;CACtD,MAAM,cAAc,wBAAwB,KAAK;CACjD,IAAI,CAAC,aAAa,OAAO,KAAA;CAEzB,OAAO,EACH,6BAA6B,YACjC;AACJ;AAEA,SAAgB,UAAU,OAA8B,YAAsC;CAC1F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,aAAa;EACb,SAAS,MAAM;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,SAAS,MAAM,UAAU,uBAAuB,MAAM,KAAK;GAC3D,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;CAC9C,CAAC,CACL;CAEA,MAAM,YAAY,eAAe,oBAAoB,MAAM,KAAK,CAAC;CAEjE,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECDA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,WAAW,aAAa,UAAU,QAAQ,UAAU;GAC5E,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;SA7BY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;gBApBb,MAAA,SAAA,CAAS;gBACT,MAAA,SAAA,CAAS;eAChB,iBAAe,qBAAoB,KAAA,CAAS;eAC5C,cAAY,cAAU,YAAA,WAAA;eAGlB,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAIV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,gBAAc,WAAU;eACxB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAMrC,OAAM,eAAA"}