ropav 0.0.2 → 0.0.4

package/dist/radio.js.map

@@ -1 +1 @@
-{"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';\n\nexport interface RadioProps {\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n    id?: string;\n    name?: string;\n    modelValue: string | number | null;\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    select: (value: string | number) => void;\n}\n\nexport const radioGroupKey = Symbol('radioGroup') as InjectionKey<RadioGroupContext>;\n","import { computed, provide, useId } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\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\n    const rootClass = computed(() =>\n        bem('rp-radio', {\n            checked: isChecked.value,\n            disabled: isDisabled.value,\n        }),\n    );\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        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() { return props.modelValue; },\n        get name() { return groupName.value; },\n        get disabled() { return control.disabled; },\n        get required() { return control.required; },\n        select(value) {\n            emitUpdate(value);\n        },\n    });\n\n    return {\n        control,\n        rootClass,\n    };\n}\n","<template>\n    <label :class=\"rootClass\" :data-disabled=\"isDisabled || undefined\" :data-state=\"isChecked ? 'checked' : 'unchecked'\">\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    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label :class=\"rootClass\" :data-disabled=\"isDisabled || undefined\" :data-state=\"isChecked ? 'checked' : 'unchecked'\">\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    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, 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    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    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":";;;;;AA2BA,IAAa,gBAAgB,OAAO,YAAY;;;ACpBhD,SAAgB,SAAS,OAA6B;CAClD,MAAM,QAAQ,kBAAkB,eAAe,SAAS;CACxD,MAAM,YAAY,eAAe,MAAM,eAAe,MAAM,KAAK;CACjE,MAAM,aAAa,eAAe,MAAM,YAAY,MAAM,QAAQ;CAElE,MAAM,YAAY,eACd,IAAI,YAAY;EACZ,SAAS,UAAU;EACnB,UAAU,WAAW;CACzB,CAAC,CACL;CAEA,SAAS,WAAW;EAChB,IAAI,WAAW,OAAO;EACtB,MAAM,OAAO,MAAM,KAAK;CAC5B;CAEA,OAAO;EACH;EACA;EACA;EACA;EACA;CACJ;AACJ;AAEA,SAAgB,cACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,kBAAkB;EAClB,UAAU,QAAQ;EAClB,SAAS,QAAQ;CACrB,CAAC,CACL;CAEA,MAAM,gBAAgB,MAAM;CAC5B,MAAM,YAAY,eAAe,MAAM,QAAQ,GAAG,QAAQ,MAAM,cAAc,OAAO;CAErF,QAA2B,eAAe;EACtC,IAAI,aAAa;GAAE,OAAO,MAAM;EAAY;EAC5C,IAAI,OAAO;GAAE,OAAO,UAAU;EAAO;EACrC,IAAI,WAAW;GAAE,OAAO,QAAQ;EAAU;EAC1C,IAAI,WAAW;GAAE,OAAO,QAAQ;EAAU;EAC1C,OAAO,OAAO;GACV,WAAW,KAAK;EACpB;CACJ,CAAC;CAED,OAAO;EACH;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;EClCA,MAAM,EAAE,OAAO,WAAW,YAAY,WAAW,aAAa,SAAS,OAAK;;;SAnB/D,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;gBATV,MAAA,SAAA,CAAS;eAAG,iBAAe,MAAA,UAAA,KAAc,KAAA,CAAS;eAAG,cAAY,aAAS,YAAA,WAAA;eAIhF,QAAM,OAAK,IAAA;gBACJ,QAAA,KAAK;eACZ,WAAS,UAAS;eAClB,YAAU,MAAA,UAAA,KAAc,KAAA,CAAS;eACjC,YAAU,OAAK,YAAa,KAAA,CAAS;;;iBAI9B,OAAM,eAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEU1B,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,cAAc,cAAc,QAAQ,UAAU;GAC3D,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;;eAjCQ,MAAI,SAAO,EAAA;gBACJ,MAAA,SAAA,CAAS;eAEhB,iBAAe,SAAO,YAAa,KAAA,CAAS;eAC5C,gBAAc,oBAAmB,KAAA,CAAS;eAC1C,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,oBAAmB,KAAA,CAAS;eAC1C,iBAAe,SAAO,YAAa,KAAA,CAAS"}
+{"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';\n\nexport type RadioColor =\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'neutral';\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 } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\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}`]: Boolean(color.value),\n            [`size-${size.value}`]: Boolean(size.value),\n        }),\n    );\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        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        :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, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\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, 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.css

@@ -1,109 +1,174 @@
-.rp-select[data-v-692ef421] {
+.rp-select[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-sm);
   position: relative;
   display: inline-flex;
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-normal);
   line-height: var(--rp-line-height-none);
 }
-.rp-select--disabled[data-v-692ef421] {
+.rp-select--disabled[data-v-9838513c] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-select__trigger[data-v-692ef421] {
+.rp-select__trigger[data-v-9838513c] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   justify-content: space-between;
   width: 100%;
-  min-width: var(--rp-component-menu-min-width);
+  min-width: 180px;
   height: var(--rp-size-control-md);
-  padding: 0 var(--rp-spacing-4);
+  padding: 0 var(--rp-spacing-3);
   font-size: var(--rp-font-size-base);
   background-color: var(--rp-color-control-bg);
   border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-  border-radius: var(--rp-radius-lg);
+  border-radius: var(--_rp-select-radius);
   cursor: pointer;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
   gap: var(--rp-spacing-2);
 }
-.rp-select__trigger[data-v-692ef421]:hover {
+.rp-select__trigger[data-v-9838513c]:hover {
   border-color: var(--rp-color-control-border-hover);
 }
-.rp-select__trigger[data-v-692ef421]:focus-visible {
+.rp-select__trigger[data-v-9838513c]:focus-visible {
   outline: none;
   border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--open .rp-select__trigger[data-v-692ef421] {
+.rp-select--radius-xs[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-sm);
+}
+.rp-select--radius-sm[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-sm);
+}
+.rp-select--radius-md[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-md);
+}
+.rp-select--radius-lg[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-lg);
+}
+.rp-select--radius-xl[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-xl);
+}
+.rp-select--open .rp-select__trigger[data-v-9838513c] {
   border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--invalid .rp-select__trigger[data-v-692ef421] {
+.rp-select--invalid .rp-select__trigger[data-v-9838513c] {
   border-color: var(--rp-color-danger-fg);
 }
-.rp-select__value[data-v-692ef421] {
+.rp-select__value[data-v-9838513c] {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--rp-color-control-fg);
 }
-.rp-select__placeholder[data-v-692ef421] {
+.rp-select__placeholder[data-v-9838513c] {
   color: var(--rp-color-control-placeholder);
 }
-.rp-select__arrow[data-v-692ef421] {
+.rp-select__indicator[data-v-9838513c] {
   display: inline-flex;
   align-items: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__arrow svg[data-v-692ef421] {
+.rp-select__indicator svg[data-v-9838513c] {
   width: 100%;
   height: 100%;
 }
-.rp-select__arrow[data-v-692ef421] {
+.rp-select__indicator[data-v-9838513c] {
+  position: relative;
   color: var(--rp-color-control-icon);
-  transition: transform var(--rp-transition-fast);
+  transform: translateX(var(--rp-spacing-1));
+}
+.rp-select__arrow[data-v-9838513c] {
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
 }
-.rp-select__arrow--open[data-v-692ef421] {
-  transform: rotate(180deg);
+.rp-select__arrow svg[data-v-9838513c] {
+  width: 100%;
+  height: 100%;
 }
-.rp-select__dropdown[data-v-692ef421] {
+.rp-select__arrow[data-v-9838513c] {
+  transition: opacity var(--rp-transition-fast);
+}
+.rp-select__clear[data-v-9838513c] {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.rp-select__clear svg[data-v-9838513c] {
+  width: 100%;
+  height: 100%;
+}
+.rp-select__clear[data-v-9838513c] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  color: var(--rp-color-control-icon);
+  opacity: 0;
+  pointer-events: none;
+  transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-select__clear[data-v-9838513c]:hover {
+  color: var(--rp-color-control-fg);
+}
+.rp-select__trigger:hover .rp-select__clear[data-v-9838513c] {
+  opacity: 1;
+  pointer-events: auto;
+}
+.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-9838513c] {
+  opacity: 0;
+}
+.rp-select__dropdown[data-v-9838513c] {
   position: absolute;
   top: calc(100% + var(--rp-spacing-1));
   left: 0;
   right: 0;
-  z-index: var(--rp-z-index-dropdown);
+  z-index: 100;
   background-color: var(--rp-color-surface-raised);
   border: var(--rp-border-width-thin) solid var(--rp-color-border);
-  border-radius: var(--rp-radius-lg);
+  border-radius: var(--_rp-select-radius);
   box-shadow: var(--rp-shadow-md);
   padding: var(--rp-spacing-1) 0;
-  max-height: var(--rp-component-menu-max-height);
+  max-height: 240px;
   overflow-y: auto;
+  padding: var(--rp-spacing-1);
 }
-.rp-select__option[data-v-692ef421] {
+.rp-select__option[data-v-9838513c] {
   display: flex;
   align-items: center;
   padding: var(--rp-spacing-2) var(--rp-spacing-4);
+  border-radius: calc(var(--_rp-select-radius) - var(--rp-spacing-1));
   font-size: var(--rp-font-size-base);
   cursor: pointer;
   transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
-  color: var(--rp-color-text);
+  color: var(--rp-color-control-fg);
 }
-.rp-select__option--focused[data-v-692ef421] {
+.rp-select__option--focused[data-v-9838513c] {
   background-color: var(--rp-color-surface-hover);
 }
-.rp-select__option--selected[data-v-692ef421] {
+.rp-select__option--selected[data-v-9838513c] {
   color: var(--rp-color-primary-fg);
   font-weight: var(--rp-font-weight-medium);
 }
-.rp-select__option--disabled[data-v-692ef421] {
+.rp-select__option--disabled[data-v-9838513c] {
   color: var(--rp-color-text-disabled);
   cursor: not-allowed;
 }
-.rp-select__empty[data-v-692ef421] {
+.rp-select__empty[data-v-9838513c] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -111,12 +176,12 @@
   color: var(--rp-color-text-secondary);
   font-size: var(--rp-font-size-base);
 }
-.rp-select-dropdown-enter-active[data-v-692ef421],
-.rp-select-dropdown-leave-active[data-v-692ef421] {
+.rp-select-dropdown-enter-active[data-v-9838513c],
+.rp-select-dropdown-leave-active[data-v-9838513c] {
   transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-select-dropdown-enter-from[data-v-692ef421],
-.rp-select-dropdown-leave-to[data-v-692ef421] {
+.rp-select-dropdown-enter-from[data-v-9838513c],
+.rp-select-dropdown-leave-to[data-v-9838513c] {
   opacity: 0;
   transform: translateY(calc(-1 * var(--rp-spacing-1)));
 }

package/dist/select.js

@@ -1,30 +1,26 @@
 import './select.css';
 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 { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch } from "vue";
-//#region src/components/_internal/icons/ChevronDownIcon.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<svg viewBox=\"0 0 16 16\"fill=none stroke=currentColor stroke-width=1.5><path d=\"M4 6l4 4 4-4\">", 3, 1);
-//#endregion
-//#region src/components/_internal/icons/ChevronDownIcon.vue
-var ChevronDownIcon_default = /* @__PURE__ */ defineVaporComponent({
-	name: "ChevronDownIcon",
-	__name: "ChevronDownIcon",
-	setup(__props) {
-		return t0$1();
-	}
-});
-//#endregion
-//#region src/components/_internal/optionList.ts
-function hasOptionListValue(value) {
-	return value != null && value !== "";
-}
-function getOptionListDisplayLabel(options, value) {
-	if (!hasOptionListValue(value)) return "";
-	return options?.find((option) => option.value === value)?.label ?? "";
+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";
+//#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();
 }
-function getOptionListActiveDescendantId(baseId, focusedIndex) {
-	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
+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);
+function render(_ctx) {
+	return t0$1();
 }
+var x_default = markRaw(defineVaporComponent({
+	name: "lucide-x",
+	render
+}));
 //#endregion
 //#region src/composables/useClickOutside.ts
 function useClickOutside(target, active, callback) {
@@ -66,7 +62,15 @@ function useListNavigation(options) {
 			localFocusedIndex.value = index;
 			return;
 		}
-		const next = direction === 1 ? indexes.find((i) => i > index) : [...indexes].reverse().find((i) => i < index);
+		let next;
+		if (direction === 1) next = indexes.find((i) => i > index);
+		else for (let i = indexes.length - 1; i >= 0; i -= 1) {
+			const candidate = indexes[i];
+			if (candidate < index) {
+				next = candidate;
+				break;
+			}
+		}
 		if (next !== void 0) localFocusedIndex.value = next;
 		else if (loop) localFocusedIndex.value = direction === 1 ? indexes[0] : indexes[indexes.length - 1];
 	}
@@ -86,7 +90,8 @@ function useListNavigation(options) {
 	}
 	function moveFocus(delta) {
 		if (localFocusedIndex.value < 0) {
-			delta === 1 ? focusFirst() : focusLast();
+			if (delta === 1) focusFirst();
+			else focusLast();
 			return;
 		}
 		setNearest(localFocusedIndex.value + delta, delta);
@@ -102,6 +107,16 @@ function useListNavigation(options) {
 }
 //#endregion
 //#region src/components/select/useSelect.ts
+function hasSelectValue(value) {
+	return value != null && value !== "";
+}
+function getSelectDisplayLabel(options, value) {
+	if (!hasSelectValue(value)) return "";
+	return options?.find((option) => option.value === value)?.label ?? "";
+}
+function getSelectActiveDescendantId(baseId, focusedIndex) {
+	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
+}
 function useSelect(props, emitUpdate) {
 	const selectRef = ref(null);
 	const triggerRef = ref(null);
@@ -115,14 +130,16 @@ function useSelect(props, emitUpdate) {
 		isSelected: (item) => item.value === props.modelValue
 	});
 	const focusedIndex = navigation.focusedIndex;
-	const activeDescendantId = computed(() => getOptionListActiveDescendantId(selectId, focusedIndex.value));
+	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value));
 	const rootClass = computed(() => bem("rp-select", {
 		open: isOpen.value,
+		[`radius-${props.radius}`]: Boolean(props.radius),
 		disabled: control.disabled,
 		invalid: control.invalid
 	}));
-	const hasValue = computed(() => hasOptionListValue(props.modelValue));
-	const displayLabel = computed(() => getOptionListDisplayLabel(props.options, props.modelValue));
+	const hasValue = computed(() => hasSelectValue(props.modelValue));
+	const displayLabel = computed(() => getSelectDisplayLabel(props.options, props.modelValue));
+	const canClear = computed(() => Boolean(props.clearable && hasValue.value && !control.disabled));
 	function focusTrigger() {
 		nextTick(() => triggerRef.value?.focus());
 	}
@@ -148,6 +165,12 @@ function useSelect(props, emitUpdate) {
 		close();
 		focusTrigger();
 	}
+	function clearSelection() {
+		if (!canClear.value) return;
+		emitUpdate(null);
+		close();
+		focusTrigger();
+	}
 	function onOptionMouseenter(option, index) {
 		if (!option.disabled) focusedIndex.value = index;
 	}
@@ -213,21 +236,24 @@ function useSelect(props, emitUpdate) {
 		rootClass,
 		hasValue,
 		displayLabel,
+		canClear,
 		toggle,
 		selectOption,
+		clearSelection,
 		onOptionMouseenter,
 		onTriggerKeydown
 	};
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<input data-v-692ef421 type=hidden>");
-var t1 = template("No options", 2);
-var t2 = template("<div data-v-692ef421 class=rp-select__empty>");
-var t3 = template("<div data-v-692ef421 role=option> ");
-var t4 = template("<div data-v-692ef421 class=rp-select__dropdown role=listbox>");
-var t5 = template("<div data-v-692ef421><div data-v-692ef421 class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-692ef421> </span><span data-v-692ef421>", 1);
-delegateEvents("click", "keydown");
+var t0 = template("<input data-v-9838513c type=hidden>");
+var t1 = template("<button data-v-9838513c type=button class=rp-select__clear aria-label=\"Clear selection\"tabindex=-1></button>");
+var t2 = template("No options", 2);
+var t3 = template("<div data-v-9838513c class=rp-select__empty>");
+var t4 = template("<div data-v-9838513c role=option> ");
+var t5 = template("<div data-v-9838513c class=rp-select__dropdown role=listbox>");
+var t6 = template("<div data-v-9838513c><div data-v-9838513c class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-9838513c> </span><span data-v-9838513c class=rp-select__indicator><span data-v-9838513c class=rp-select__arrow aria-hidden=true>", 1);
+delegateEvents("mousedown", "click", "keydown");
 //#endregion
 //#region src/components/select/select.vue
 var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -238,7 +264,12 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		name: {},
 		modelValue: {},
 		options: { default: () => [] },
+		radius: {},
 		placeholder: { default: "Select..." },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -259,16 +290,17 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, toggle, selectOption, onOptionMouseenter, onTriggerKeydown } = useSelect(props, (value) => {
+		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onTriggerKeydown } = useSelect(props, (value) => {
 			emit("update:modelValue", value);
 		});
 		const _setTemplateRef = createTemplateRefSetter();
-		const n20 = t5();
-		const n6 = child(n20, 1);
-		const n3 = child(n6);
-		const n5 = next(n3, 1);
-		renderEffect(() => setClass(n20, unref(rootClass)));
-		setInsertionState(n20, 0, 0);
+		const n25 = t6();
+		const n11 = child(n25, 1);
+		const n3 = child(n11);
+		const n10 = next(n3, 1);
+		const n9 = child(n10, 1);
+		renderEffect(() => setClass(n25, unref(rootClass)));
+		setInsertionState(n25, 0, 0);
 		createIf(() => __props.name, () => {
 			const n2 = t0();
 			renderEffect(() => {
@@ -283,49 +315,57 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			const _control = unref(control);
 			const _isOpen = unref(isOpen);
 			const _control_disabled = _control.disabled;
-			setProp(n6, "id", _control.id);
-			setAttr(n6, "aria-expanded", _isOpen);
-			setAttr(n6, "aria-activedescendant", unref(activeDescendantId));
-			setAttr(n6, "aria-controls", unref(listboxId));
-			setAttr(n6, "aria-disabled", _control_disabled || void 0);
-			setAttr(n6, "aria-invalid", _control.invalid || void 0);
-			setAttr(n6, "aria-required", _control.required || void 0);
-			setAttr(n6, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n6, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n6, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n6, "data-state", _isOpen ? "open" : "closed");
-			setAttr(n6, "data-disabled", _control_disabled || void 0);
-			setProp(n6, "tabindex", _control_disabled ? -1 : 0);
+			setProp(n11, "id", _control.id);
+			setAttr(n11, "aria-expanded", _isOpen);
+			setAttr(n11, "aria-activedescendant", unref(activeDescendantId));
+			setAttr(n11, "aria-controls", unref(listboxId));
+			setAttr(n11, "aria-disabled", _control_disabled || void 0);
+			setAttr(n11, "aria-invalid", _control.invalid || void 0);
+			setAttr(n11, "aria-required", _control.required || void 0);
+			setAttr(n11, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n11, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n11, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n11, "data-state", _isOpen ? "open" : "closed");
+			setAttr(n11, "data-disabled", _control_disabled || void 0);
+			setProp(n11, "tabindex", _control_disabled ? -1 : 0);
 			setClassName(n3, !unref(hasValue) ? 1 : 0, " rp-select__placeholder", "rp-select__value");
 			setText(x3, toDisplayString(unref(displayLabel) || __props.placeholder));
-			setClassName(n5, _isOpen ? 1 : 0, " rp-select__arrow--open", "rp-select__arrow");
 		});
-		setInsertionState(n5, null, 0);
-		createComponent(unref(ChevronDownIcon_default));
-		n6.$evtclick = createInvoker((e) => unref(toggle)(e));
-		n6.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
-		_setTemplateRef(n6, triggerRef, null, "triggerRef");
-		setInsertionState(n20, null, 2);
+		setInsertionState(n10, 0, 0);
+		createIf(() => unref(canClear), () => {
+			const n7 = t1();
+			setInsertionState(n7, null, 0);
+			createComponent(unref(x_default));
+			n7.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+			on(n7, "click", withModifiers((e) => unref(clearSelection)(e), ["stop"]));
+			return n7;
+		});
+		setInsertionState(n9, null, 0);
+		createComponent(unref(chevrons_up_down_default));
+		n11.$evtclick = createInvoker((e) => unref(toggle)(e));
+		n11.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
+		_setTemplateRef(n11, triggerRef, null, "triggerRef");
+		setInsertionState(n25, null, 2);
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
-				const n18 = t4();
-				renderEffect(() => setProp(n18, "id", unref(listboxId)));
-				setInsertionState(n18, null, 0);
+				const n23 = t5();
+				renderEffect(() => setProp(n23, "id", unref(listboxId)));
+				setInsertionState(n23, null, 0);
 				createIf(() => unref(visibleOptions).length === 0, () => {
-					const n14 = t2();
-					setInsertionState(n14, null, 0);
+					const n19 = t3();
+					setInsertionState(n19, null, 0);
 					createSlot("empty", null, () => {
-						return t1();
+						return t2();
 					}, 1);
-					return n14;
+					return n19;
 				});
-				setInsertionState(n18, null, 1);
-				const _selector15 = createSelector(() => __props.modelValue);
+				setInsertionState(n23, null, 1);
+				const _selector20 = createSelector(() => __props.modelValue);
 				createFor(() => unref(visibleOptions), (_for_item0, _for_key0) => {
-					const n17 = t3();
-					const x17 = txt(n17);
-					n17.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
-					on(n17, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
+					const n22 = t4();
+					const x22 = txt(n22);
+					n22.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
+					on(n22, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
 					let _index, _option, _modelValue, _option_disabled, _option_value;
 					renderEffect(() => {
 						_index = _for_key0.value;
@@ -333,29 +373,29 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 						_modelValue = __props.modelValue;
 						_option_disabled = _option.disabled;
 						_option_value = _option.value;
-						setProp(n17, "id", `${unref(selectId)}-option-${_index}`);
-						setAttr(n17, "aria-disabled", _option_disabled || void 0);
-						setAttr(n17, "data-selected", _option_value === _modelValue || void 0);
-						setAttr(n17, "data-disabled", _option_disabled || void 0);
-						setClass(n17, ["rp-select__option", {
+						setProp(n22, "id", `${unref(selectId)}-option-${_index}`);
+						setAttr(n22, "aria-disabled", _option_disabled || void 0);
+						setAttr(n22, "data-selected", _option_value === _modelValue || void 0);
+						setAttr(n22, "data-disabled", _option_disabled || void 0);
+						setClass(n22, ["rp-select__option", {
 							"rp-select__option--selected": _option_value === _modelValue,
 							"rp-select__option--focused": _index === unref(focusedIndex),
 							"rp-select__option--disabled": _option_disabled
 						}]);
-						setText(x17, toDisplayString(_option.label));
+						setText(x22, toDisplayString(_option.label));
 					});
-					_selector15(_option.value, () => {
-						setAttr(n17, "aria-selected", _option.value === _modelValue);
+					_selector20(_option.value, () => {
+						setAttr(n22, "aria-selected", _option.value === _modelValue);
 					});
-					return n17;
-				}, (option, index) => option.value, 8).onReset(_selector15.reset);
-				return n18;
+					return n22;
+				}, (option, index) => option.value, 8).onReset(_selector20.reset);
+				return n23;
 			}, null, 129);
 		}, { _: 8 }));
-		_setTemplateRef(n20, selectRef, null, "selectRef");
-		return n20;
+		_setTemplateRef(n25, selectRef, null, "selectRef");
+		return n25;
 	}
-}), [["__scopeId", "data-v-692ef421"]]);
+}), [["__scopeId", "data-v-9838513c"]]);
 //#endregion
 export { select_default as t };