ropav 0.0.8 → 0.0.9

package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts

@@ -7,7 +7,7 @@ type UseDropdownSubmenusOptions = {
     focusItem: (target: Exclude<SubmenuFocusTarget, false>, menuPath?: ItemPath) => boolean;
 };
 export declare function useDropdownSubmenus({ focusedPath, getItemAtPath, focusItem, }: UseDropdownSubmenusOptions): {
-    openSubmenuPath: Ref<number[], import('./types').DropdownMenuItemPath | number[]>;
+    openSubmenuPath: Ref<number[], number[] | import('./types').DropdownMenuItemPath>;
     resetSubmenus: () => void;
     isSubmenuOpen: (path: ItemPath) => boolean;
     closeSubmenusAfter: (menuPath: ItemPath) => void;

package/dist/components/field/types.d.ts

@@ -13,8 +13,6 @@ export interface FieldProps {
     id?: string;
     label?: string;
     description?: string;
-    message?: string;
-    error?: string;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;

package/dist/components/field/useField.d.ts

@@ -3,9 +3,7 @@ export declare function useField(props: Readonly<FieldProps>): {
     controlId: import('vue').ComputedRef<string>;
     labelId: import('vue').ComputedRef<string>;
     descriptionId: import('vue').ComputedRef<string>;
-    messageId: import('vue').ComputedRef<string>;
     isInvalid: import('vue').ComputedRef<boolean>;
-    messageText: import('vue').ComputedRef<string | undefined>;
     hasLabel: import('vue').ComputedRef<boolean>;
     hasDescription: import('vue').ComputedRef<boolean>;
     hasMessage: import('vue').ComputedRef<boolean>;

package/dist/components/icon-button/types.d.ts

@@ -7,6 +7,7 @@ export interface IconButtonProps {
     ariaLabel: string;
     variant?: IconButtonVariant;
     color?: IconButtonColor;
+    autoContrast?: boolean;
     size?: IconButtonSize;
     radius?: IconButtonRadius;
     type?: 'button' | 'submit' | 'reset';

package/dist/components/input/types.d.ts

@@ -1,3 +1,4 @@
+import { InputHTMLAttributes } from 'vue';
 export type InputRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface InputProps {
@@ -16,4 +17,6 @@ export interface InputProps {
     ariaLabel?: string;
     describedby?: string;
     labelledby?: string;
+    inputAttrs?: InputHTMLAttributes;
+    validationMessage?: string;
 }

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NumberInput } from './number-input';
+export type { NumberInputControlsPosition, NumberInputProps, NumberInputRadius, NumberInputSize, NumberInputTextAlign, NumberInputValue, } from './types';

package/dist/components/number-input/index.js

@@ -0,0 +1,2 @@
+import { t as number_input_default } from "../../number-input.js";
+export { number_input_default as NumberInput };

package/dist/components/number-input/number-input.d.ts

@@ -0,0 +1,29 @@
+import { NumberInputProps, NumberInputValue } from './types';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<NumberInputProps & {
+        "onUpdate:modelValue"?: ((value: NumberInputValue) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'increment-icon'?: (props: {}) => any;
+    } & {
+        'decrement-icon'?: (props: {}) => any;
+    } & {
+        'increment-icon'?: (props: {}) => any;
+    } & {
+        'decrement-icon'?: (props: {}) => any;
+    };
+    emit: (evt: "update:modelValue", value: NumberInputValue) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/number-input/types.d.ts

@@ -0,0 +1,34 @@
+import { InputHTMLAttributes } from 'vue';
+import { InputRadius, InputSize } from '../input/types';
+export type NumberInputValue = number | null;
+export type NumberInputRadius = InputRadius;
+export type NumberInputSize = InputSize;
+export type NumberInputControlsPosition = 'left' | 'right' | 'split';
+export type NumberInputTextAlign = 'left' | 'center' | 'right';
+export interface NumberInputProps {
+    id?: string;
+    name?: string;
+    modelValue: NumberInputValue;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: NumberInputSize;
+    radius?: NumberInputRadius;
+    placeholder?: string;
+    controls?: boolean;
+    controlsPosition?: NumberInputControlsPosition;
+    textAlign?: NumberInputTextAlign;
+    clampOnBlur?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    valid?: boolean;
+    ariaLabel?: string;
+    describedby?: string;
+    labelledby?: string;
+    inputAttrs?: InputHTMLAttributes;
+    validationMessage?: string;
+    incrementLabel?: string;
+    decrementLabel?: string;
+}

package/dist/components/number-input/useNumberInput.d.ts

@@ -0,0 +1,31 @@
+import { InputHTMLAttributes } from 'vue';
+import { NumberInputControlsPosition, NumberInputProps, NumberInputTextAlign, NumberInputValue } from './types';
+export interface NumberInputBounds {
+    min: number | undefined;
+    max: number | undefined;
+}
+type StepDirection = -1 | 1;
+export type NumberInputControl = 'decrement' | 'increment';
+export declare function normalizeNumberInputBounds(min: number | undefined, max: number | undefined): NumberInputBounds;
+export declare function normalizeNumberInputStep(step: number | undefined): number;
+export declare function clampNumberInputValue(value: number, bounds: NumberInputBounds): number;
+export declare function stepNumberInputValue(value: NumberInputValue, direction: StepDirection, step: number, bounds: NumberInputBounds): number;
+export declare function parseNumberInputValue(value: string): NumberInputValue;
+export declare function normalizeNumberInputControlsPosition(position: NumberInputControlsPosition | undefined): NumberInputControlsPosition;
+export declare function normalizeNumberInputTextAlign(textAlign: NumberInputTextAlign | undefined): NumberInputTextAlign;
+export declare function useNumberInput(props: Readonly<NumberInputProps>, emitUpdate: (value: NumberInputValue) => void): {
+    control: import('../../composables/useControlState').ControlState;
+    rootClass: import('vue').ComputedRef<string[]>;
+    bounds: import('vue').ComputedRef<NumberInputBounds>;
+    nativeStep: import('vue').ComputedRef<number>;
+    nativeInputAttrs: import('vue').ComputedRef<InputHTMLAttributes>;
+    modelInputValue: import('vue').ComputedRef<string>;
+    leftControls: import('vue').ComputedRef<NumberInputControl[]>;
+    rightControls: import('vue').ComputedRef<NumberInputControl[]>;
+    canIncrement: import('vue').ComputedRef<boolean>;
+    canDecrement: import('vue').ComputedRef<boolean>;
+    increment: () => boolean;
+    decrement: () => boolean;
+    onInputUpdate: (value: string) => void;
+};
+export {};

package/dist/components/popover/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Popover } from './popover';
+export { popoverPlacements } from './types';
 export type { PopoverContentSlotProps, PopoverOffset, PopoverOffsetOptions, PopoverPlacement, PopoverProps, PopoverRole, PopoverSlotProps, PopoverTarget, PopoverTriggerProps, } from './types';

package/dist/components/popover/index.js

@@ -1,2 +1,3 @@
 import { t as popover_default } from "../../popover.js";
-export { popover_default as Popover };
+import { t as popoverPlacements } from "../../popover2.js";
+export { popover_default as Popover, popoverPlacements };

package/dist/components/popover/types.d.ts

@@ -1,5 +1,6 @@
 import { Ref } from 'vue';
-export type PopoverPlacement = 'top' | 'right' | 'bottom' | 'left';
+export declare const popoverPlacements: readonly ["top-start", "top", "top-end", "right-start", "right", "right-end", "bottom-start", "bottom", "bottom-end", "left-start", "left", "left-end"];
+export type PopoverPlacement = (typeof popoverPlacements)[number];
 export type PopoverTarget = string | HTMLElement | Ref<HTMLElement | null | undefined>;
 export interface PopoverOffsetOptions {
     mainAxis?: number;

package/dist/components/progress/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentColorValue } from '../../utils/componentColors';
-export declare const progressColors: readonly ["primary", "secondary", "success", "warning", "danger", "info", "neutral"];
+export declare const progressColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const progressSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const progressRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type ProgressColor = ComponentColorValue;

package/dist/components/radio/types.d.ts

@@ -7,6 +7,7 @@ export interface RadioProps {
     value: string | number;
     variant?: RadioVariant;
     color?: RadioColor;
+    autoContrast?: boolean;
     size?: RadioSize;
     disabled?: boolean;
 }
@@ -16,6 +17,7 @@ export interface RadioGroupProps {
     modelValue: string | number | null;
     variant?: RadioVariant;
     color?: RadioColor;
+    autoContrast?: boolean;
     size?: RadioSize;
     disabled?: boolean;
     required?: boolean;
@@ -31,6 +33,7 @@ export interface RadioGroupContext {
     required: boolean;
     variant?: RadioVariant;
     color?: RadioColor;
+    autoContrast?: boolean;
     size?: RadioSize;
     select: (value: string | number) => void;
 }

package/dist/components/radio/useRadio.d.ts

@@ -1,13 +1,11 @@
+import { CSSProperties } from 'vue';
 import { RadioGroupContext, RadioGroupProps, RadioProps } from './types';
 export declare function useRadio(props: Readonly<RadioProps>): {
     group: RadioGroupContext;
     isChecked: import('vue').ComputedRef<boolean>;
     isDisabled: import('vue').ComputedRef<boolean>;
     rootClass: import('vue').ComputedRef<string[]>;
-    rootStyle: import('vue').ComputedRef<{
-        '--_rp-radio-custom-color': string & {};
-        '--_rp-radio-custom-on-color': string;
-    } | undefined>;
+    rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
     onSelect: () => void;
 };
 export declare function useRadioGroup(props: Readonly<RadioGroupProps>, emitUpdate: (value: string | number | null) => void): {

package/dist/components/select/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Select } from './select';
-export type { SelectProps, SelectOption } from './types';
+export type { SelectOption, SelectProps, SelectRadius, SelectSize } from './types';

package/dist/components/select/types.d.ts

@@ -4,14 +4,17 @@ export interface SelectOption {
     disabled?: boolean;
 }
 export type SelectRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SelectProps {
     id?: string;
     name?: string;
     modelValue: string | number | null;
     options?: SelectOption[];
+    size?: SelectSize;
     radius?: SelectRadius;
     placeholder?: string;
     clearable?: boolean;
+    clearLabel?: string;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;

package/dist/components/slider/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Slider } from './slider';
+export { default as RangeSlider } from './range-slider';
 export { sliderColors, sliderOrientations, sliderSizes } from './types';
-export type { SliderColor, SliderMark, SliderMarkColor, SliderMarkInput, SliderOrientation, SliderProps, SliderPresetColor, SliderSize, SliderThumbStyle, SliderTooltip, SliderTooltipMode, SliderTooltipOptions, SliderValueFormatter, } from './types';
+export type { RangeSliderAriaValueText, RangeSliderEndpointValueText, RangeSliderProps, RangeSliderThumb, RangeSliderValue, SliderColor, SliderMark, SliderMarkColor, SliderMarkInput, SliderOrientation, SliderProps, SliderPresetColor, SliderSize, SliderThumbStyle, SliderTooltip, SliderTooltipMode, SliderTooltipOptions, SliderValueFormatter, } from './types';

package/dist/components/slider/index.js

@@ -1,2 +1,2 @@
-import { i as sliderSizes, n as sliderColors, r as sliderOrientations, t as slider_default } from "../../slider.js";
-export { slider_default as Slider, sliderColors, sliderOrientations, sliderSizes };
+import { a as slider_default, i as range_slider_default, n as sliderOrientations, r as sliderSizes, t as sliderColors } from "../../slider.js";
+export { range_slider_default as RangeSlider, slider_default as Slider, sliderColors, sliderOrientations, sliderSizes };

package/dist/components/slider/range-slider.d.ts

@@ -0,0 +1,45 @@
+import { RangeSliderProps } from './types';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<RangeSliderProps & {
+        "onUpdate:modelValue"?: ((value: [number, number]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    } & {
+        value?: (props: {
+            value: import('./types').RangeSliderValue;
+            formattedValue: [string | number, string | number];
+            percent: import('./types').RangeSliderValue;
+        }) => any;
+    } & {
+        thumb?: (props: {
+            thumb: string;
+            index: number;
+            value: number;
+            formattedValue: string | number;
+            percent: number;
+        }) => any;
+    } & {
+        thumb?: (props: {
+            thumb: string;
+            index: number;
+            value: number;
+            formattedValue: string | number;
+            percent: number;
+        }) => any;
+    };
+    emit: (evt: "update:modelValue", value: [number, number]) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/slider/types.d.ts

@@ -1,12 +1,17 @@
 import { TooltipProps } from '../tooltip/types';
-export declare const sliderColors: readonly ["primary", "secondary", "success", "warning", "danger", "info", "neutral"];
+import { ComponentColorValue } from '../../utils/componentColors';
+export declare const sliderColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const sliderSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const sliderOrientations: readonly ["horizontal", "vertical"];
 export type SliderPresetColor = (typeof sliderColors)[number];
-export type SliderColor = SliderPresetColor | (string & {});
+export type SliderColor = ComponentColorValue;
 export type SliderSize = (typeof sliderSizes)[number];
 export type SliderOrientation = (typeof sliderOrientations)[number];
 export type SliderValueFormatter = (value: number) => string | number;
+export type RangeSliderValue = [number, number];
+export type RangeSliderThumb = 'lower' | 'upper';
+export type RangeSliderEndpointValueText = string | SliderValueFormatter;
+export type RangeSliderAriaValueText = RangeSliderEndpointValueText | [RangeSliderEndpointValueText, RangeSliderEndpointValueText];
 export type SliderTooltipMode = 'hover' | 'always';
 export type SliderTooltipOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'> & {
     mode?: SliderTooltipMode;
@@ -48,3 +53,10 @@ export interface SliderProps {
     describedby?: string;
     labelledby?: string;
 }
+export interface RangeSliderProps extends Omit<SliderProps, 'modelValue' | 'name' | 'ariaLabel' | 'ariaValueText'> {
+    modelValue: RangeSliderValue;
+    minRange?: number;
+    name?: string | [string, string];
+    ariaLabel?: [string, string];
+    ariaValueText?: RangeSliderAriaValueText;
+}

package/dist/components/slider/useRangeSlider.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties } from 'vue';
+import { RangeSliderProps, RangeSliderThumb, RangeSliderValue } from './types';
+type RangeSliderStateProps = Readonly<RangeSliderProps & {
+    min: number;
+    max: number;
+    step: number | 'any';
+    minRange: number;
+    tooltip: NonNullable<RangeSliderProps['tooltip']>;
+    orientation: NonNullable<RangeSliderProps['orientation']>;
+    ariaLabel: [string, string];
+}>;
+export declare function normalizeRangeSliderMinRange(minRange: number, min: number, max: number): number;
+export declare function normalizeRangeSliderValue(value: RangeSliderValue, min: number, max: number, step: number | 'any', minRange?: number): RangeSliderValue;
+export declare function getClosestRangeSliderThumb(value: number, range: RangeSliderValue, activeThumb?: RangeSliderThumb): RangeSliderThumb;
+export declare function useRangeSlider(props: RangeSliderStateProps, emitUpdate: (value: RangeSliderValue) => void): {
+    control: import('../../composables/useControlState').ControlState;
+    nativeMin: import('vue').ComputedRef<RangeSliderValue>;
+    nativeMax: import('vue').ComputedRef<RangeSliderValue>;
+    nativeStep: import('vue').ComputedRef<number | "any">;
+    nativeNames: import('vue').ComputedRef<[string | undefined, string | undefined]>;
+    nativeIds: import('vue').ComputedRef<[string | undefined, string | undefined]>;
+    rootClass: import('vue').ComputedRef<string[]>;
+    normalizedValue: import('vue').ComputedRef<RangeSliderValue>;
+    valuePercent: import('vue').ComputedRef<RangeSliderValue>;
+    formattedValue: import('vue').ComputedRef<[string | number, string | number]>;
+    ariaLabels: import('vue').ComputedRef<[string, string]>;
+    ariaValueText: import('vue').ComputedRef<[string | undefined, string | undefined]>;
+    markItems: import('vue').ComputedRef<{
+        key: string;
+        value: number;
+        label: string | number | undefined;
+        hasLabel: boolean;
+        filled: boolean;
+        style: CSSProperties;
+    }[]>;
+    trackStyle: import('vue').ComputedRef<CSSProperties>;
+    activeThumb: import('vue').Ref<RangeSliderThumb | undefined, RangeSliderThumb | undefined>;
+    tooltipVisible: import('vue').ComputedRef<boolean>;
+    tooltipOpen: import('vue').ComputedRef<boolean>;
+    tooltipPlacement: import('vue').ComputedRef<import('../tooltip').TooltipPlacement>;
+    tooltipIds: import('vue').ComputedRef<[string | undefined, string | undefined]>;
+    mergedTooltipId: import('vue').ComputedRef<string | undefined>;
+    tooltipColor: import('vue').ComputedRef<import('../../utils/componentColors').ComponentColorValue | undefined>;
+    tooltipOffset: import('vue').ComputedRef<import('../tooltip').TooltipOffset | undefined>;
+    tooltipOpenDelay: import('vue').ComputedRef<number>;
+    tooltipArrow: import('vue').ComputedRef<boolean>;
+    tooltipContent: import('vue').ComputedRef<[string, string]>;
+    mergedTooltipContent: import('vue').ComputedRef<string>;
+    onInput: (thumb: RangeSliderThumb, event: Event) => void;
+    onTrackPointerDown: (event: PointerEvent) => void;
+    onTooltipFocus: (thumb: RangeSliderThumb) => void;
+    onTooltipBlur: (thumb: RangeSliderThumb) => void;
+    onTooltipTrackMouseEnter: () => void;
+    onTooltipTrackMouseLeave: () => void;
+    openTooltip: (thumb: RangeSliderThumb) => void;
+    closeTooltip: (thumb?: RangeSliderThumb) => void;
+    onTooltipKeydown: (thumb: RangeSliderThumb, event: KeyboardEvent) => void;
+};
+export {};

package/dist/components/slider/useRangeSliderTooltipCollision.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+type TooltipRect = Pick<DOMRect, 'bottom' | 'height' | 'left' | 'right' | 'top' | 'width'>;
+export declare function areRangeSliderTooltipRectsOverlapping(lower: TooltipRect, upper: TooltipRect, gap?: number): boolean;
+export declare function useRangeSliderTooltipCollision(root: Ref<HTMLElement | null>): {
+    tooltipsOverlapping: Ref<boolean, boolean>;
+};
+export {};

package/dist/components/slider/useRangeSliderTooltipTransition.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+type EndpointTooltipKind = 'lower' | 'upper';
+export declare function useRangeSliderTooltipTransition(root: Ref<HTMLElement | null>, tooltipsOverlapping: Ref<boolean>, value: Ref<readonly [number, number]>, activeThumb: Ref<EndpointTooltipKind | undefined>): void;
+export {};

package/dist/components/switch/useSwitch.d.ts

@@ -1,9 +1,8 @@
+import { CSSProperties } from 'vue';
 import { SwitchProps } from './types';
 export declare function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void): {
     control: import('../../composables/useControlState').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
-    rootStyle: import('vue').ComputedRef<{
-        '--_rp-switch-custom-color': string & {};
-    } | undefined>;
+    rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
     onChange: (e: Event) => void;
 };

package/dist/components/tooltip/types.d.ts

@@ -20,6 +20,7 @@ export interface TooltipProps {
     target?: TooltipTarget | null;
     placement?: TooltipPlacement;
     color?: TooltipColor;
+    autoContrast?: boolean;
     offset?: TooltipOffset;
     open?: boolean;
     openDelay?: number;

package/dist/dropdown-menu.css

@@ -1,13 +1,13 @@
 .rp-dropdown-menu {
   --_rp-dropdown-menu-radius: var(--rp-radius-sm);
-  --_rp-dropdown-menu-focused-bg: var(--rp-color-surface-hover);
+  --_rp-dropdown-menu-focused-bg: var(--rp-color-default-hover);
   position: relative;
   display: inline-flex;
   font-family: var(--rp-font-family);
   vertical-align: middle;
 }
-html.dark .rp-dropdown-menu {
-  --_rp-dropdown-menu-focused-bg: var(--rp-color-button-default-bg-active);
+html.dark .rp-dropdown-menu, [data-rp-color-scheme=dark] .rp-dropdown-menu {
+  --_rp-dropdown-menu-focused-bg: var(--rp-color-disabled);
 }
 .rp-dropdown-menu--disabled {
   opacity: var(--rp-opacity-disabled);
@@ -15,8 +15,8 @@ html.dark .rp-dropdown-menu {
 }
 .rp-dropdown-menu__content {
   z-index: 100;
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-dropdown-menu-radius);
   box-shadow: var(--rp-shadow-md);
   padding: var(--rp-spacing-1) 0;
@@ -27,8 +27,8 @@ html.dark .rp-dropdown-menu {
   overflow-y: auto;
   padding: var(--rp-spacing-1);
   color: var(--rp-color-text);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
   outline: none;
 }
 .rp-dropdown-menu__content--has-submenu {
@@ -77,10 +77,10 @@ html.dark .rp-dropdown-menu {
   background-color: var(--_rp-dropdown-menu-focused-bg);
 }
 .rp-dropdown-menu__item--destructive {
-  color: var(--rp-color-danger-fg);
+  color: var(--rp-color-red-light-color);
 }
 .rp-dropdown-menu__item--disabled {
-  color: var(--rp-color-text-disabled);
+  color: var(--rp-color-disabled-color);
   cursor: not-allowed;
 }
 .rp-dropdown-menu__item--submenu {
@@ -93,7 +93,7 @@ html.dark .rp-dropdown-menu {
   text-overflow: ellipsis;
 }
 .rp-dropdown-menu__shortcut {
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
   font: inherit;
   font-size: var(--rp-font-size-sm);
 }
@@ -110,12 +110,12 @@ html.dark .rp-dropdown-menu {
 }
 .rp-dropdown-menu__submenu-icon {
   margin-left: auto;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
 }
 .rp-dropdown-menu__submenu {
   z-index: 100;
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-dropdown-menu-radius);
   box-shadow: var(--rp-shadow-md);
   padding: var(--rp-spacing-1) 0;
@@ -128,8 +128,8 @@ html.dark .rp-dropdown-menu {
   overflow-y: auto;
   padding: var(--rp-spacing-1);
   color: var(--rp-color-text);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
   outline: none;
 }
 .rp-dropdown-menu__submenu--has-submenu {
@@ -145,8 +145,8 @@ html.dark .rp-dropdown-menu {
   justify-content: center;
   min-height: var(--rp-size-control-sm);
   padding: var(--rp-spacing-2) var(--rp-spacing-4);
-  color: var(--rp-color-text-secondary);
-  font-size: var(--rp-font-size-base);
+  color: var(--rp-color-dimmed);
+  font-size: var(--rp-font-size-md);
 }
 .rp-dropdown-menu-content-enter-active,
 .rp-dropdown-menu-content-leave-active {

package/dist/field.css

@@ -1,15 +1,15 @@
-.rp-field[data-v-0d027ead] {
-  --_rp-field-danger: var(--rp-color-danger);
+.rp-field[data-v-f9e37351] {
+  --_rp-field-danger: var(--rp-color-red-filled);
   display: grid;
   gap: var(--rp-spacing-1);
   min-width: 0;
   font-family: var(--rp-font-family);
   color: var(--rp-color-text);
 }
-html.dark .rp-field[data-v-0d027ead] {
-  --_rp-field-danger: var(--rp-color-danger-fg);
+html.dark .rp-field[data-v-f9e37351], [data-rp-color-scheme=dark] .rp-field[data-v-f9e37351] {
+  --_rp-field-danger: var(--rp-color-red-light-color);
 }
-.rp-field__label[data-v-0d027ead] {
+.rp-field__label[data-v-f9e37351] {
   display: inline-flex;
   width: fit-content;
   align-items: center;
@@ -17,27 +17,24 @@ html.dark .rp-field[data-v-0d027ead] {
   color: var(--rp-color-text);
   font-size: var(--rp-font-size-sm);
   font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
 }
-.rp-field__required[data-v-0d027ead] {
+.rp-field__required[data-v-f9e37351] {
   color: var(--_rp-field-danger);
-  line-height: var(--rp-line-height-none);
+  line-height: 1;
 }
-.rp-field__label + .rp-field__control[data-v-0d027ead] {
+.rp-field__label + .rp-field__control[data-v-f9e37351] {
   margin-block-start: var(--rp-spacing-1);
 }
-.rp-field__control[data-v-0d027ead] {
+.rp-field__control[data-v-f9e37351] {
   min-width: 0;
 }
-.rp-field__description[data-v-0d027ead], .rp-field__message[data-v-0d027ead] {
+.rp-field__description[data-v-f9e37351] {
   margin: 0;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
   font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
 }
-.rp-field--invalid .rp-field__message[data-v-0d027ead] {
-  color: var(--_rp-field-danger);
-}
-.rp-field--disabled .rp-field__label[data-v-0d027ead], .rp-field--disabled .rp-field__description[data-v-0d027ead], .rp-field--disabled .rp-field__message[data-v-0d027ead] {
-  color: var(--rp-color-text-disabled);
+.rp-field--disabled .rp-field__label[data-v-f9e37351], .rp-field--disabled .rp-field__description[data-v-f9e37351] {
+  color: var(--rp-color-disabled-color);
 }