ropav 0.1.8 → 0.2.0

package/dist/componentColors.js

@@ -1,7 +1,7 @@
 import { t as parseCssColor } from "./color.js";
 //#region src/utils/componentColors.ts
 var componentColors = [
-	"dark",
+	"primary",
 	"gray",
 	"red",
 	"pink",
@@ -17,7 +17,6 @@ var componentColors = [
 	"orange"
 ];
 var componentColorShades = [
-	"0",
 	"1",
 	"2",
 	"3",
@@ -26,13 +25,15 @@ var componentColorShades = [
 	"6",
 	"7",
 	"8",
-	"9"
+	"9",
+	"10",
+	"11",
+	"12"
 ];
 var componentColorNames = new Set(componentColors);
 var componentColorShadeNames = new Set(componentColorShades);
 function parseComponentColor(color) {
 	if (!color) return { kind: "empty" };
-	if (color === "primary") return { kind: "primary" };
 	if (componentColorNames.has(color)) return {
 		kind: "preset",
 		color
@@ -53,7 +54,6 @@ function parseComponentColor(color) {
 }
 function getComponentColorValue(color) {
 	const parsed = parseComponentColor(color);
-	if (parsed.kind === "primary") return "var(--rp-primary-color-filled)";
 	if (parsed.kind === "preset") return `var(--rp-color-${parsed.color}-filled)`;
 	if (parsed.kind === "shade") return `var(--rp-color-${parsed.color}-${parsed.shade})`;
 	if (parsed.kind === "custom") return parsed.value;
@@ -91,42 +91,45 @@ function getComponentColorRoles(color) {
 	switch (parsed.kind) {
 		case "empty":
 		case "invalid": return;
-		case "primary": return createPrimaryColorRoles();
 		case "preset": return createPresetColorRoles(parsed.color);
 		case "shade": return createShadeColorRoles(parsed.color, parsed.shade);
 		case "custom": return createCustomColorRoles(parsed.value);
 	}
 }
-function createPrimaryColorRoles() {
-	return createComponentColorRoles("var(--rp-primary-color-filled)", {
-		hover: "var(--rp-primary-color-filled-hover)",
-		contrast: "var(--rp-primary-color-contrast)",
-		light: "var(--rp-primary-color-light)",
-		lightHover: "var(--rp-primary-color-light-hover)",
-		outline: "var(--rp-primary-color-outline)",
-		outlineHover: "color-mix(in srgb, var(--rp-primary-color-outline) 62%, transparent)",
-		foreground: "var(--rp-primary-color-light-color)"
-	});
-}
 function createPresetColorRoles(color) {
 	return createComponentColorRoles(`var(--rp-color-${color}-filled)`, {
 		hover: `var(--rp-color-${color}-filled-hover)`,
 		contrast: `var(--rp-color-${color}-contrast)`,
 		light: `var(--rp-color-${color}-light)`,
 		lightHover: `var(--rp-color-${color}-light-hover)`,
+		lightActive: `var(--rp-color-${color}-light-active)`,
 		outline: `var(--rp-color-${color}-outline)`,
-		outlineHover: `color-mix(in srgb, var(--rp-color-${color}-outline) 62%, transparent)`,
+		outlineHover: `var(--rp-color-${color}-outline-hover)`,
 		foreground: `var(--rp-color-${color}-light-color)`
 	});
 }
+/**
+* Readable text for content sitting on a palette step, by Radix band:
+* steps 1-8 are backgrounds/borders (step-12 text reads on all of them),
+* 9-10 are solids (the generated companion foreground), 11-12 are themselves
+* text colors (step-1 is the app background they invert against).
+*/
+function getShadeContrastColor(color, step) {
+	if (step >= 11) return `var(--rp-color-${color}-1)`;
+	if (step >= 9) return `var(--rp-color-${color}-contrast)`;
+	return `var(--rp-color-${color}-12)`;
+}
 function createShadeColorRoles(color, shade) {
-	const base = `var(--rp-color-${color}-${shade})`;
-	const hoverShade = Math.min(Number(shade) + 1, 9);
+	const step = Number(shade);
+	const hoverStep = Math.min(step + 1, 12);
+	const activeStep = Math.min(step + 2, 12);
+	const base = `var(--rp-color-${color}-${step})`;
 	return createComponentColorRoles(base, {
-		hover: `var(--rp-color-${color}-${hoverShade})`,
-		contrast: `var(--rp-color-${color}-${shade}-contrast)`,
-		contrastHover: `var(--rp-color-${color}-${hoverShade}-contrast)`,
-		contrastActive: `var(--rp-color-${color}-${shade}-active-contrast)`,
+		hover: `var(--rp-color-${color}-${hoverStep})`,
+		active: `var(--rp-color-${color}-${activeStep})`,
+		contrast: getShadeContrastColor(color, step),
+		contrastHover: getShadeContrastColor(color, hoverStep),
+		contrastActive: getShadeContrastColor(color, activeStep),
 		foreground: base
 	});
 }
@@ -270,6 +273,7 @@ var customForegroundBackgroundMixes = [
 	.18,
 	.24
 ];
+var customForegroundMinimumContrast = 4.6;
 function getCustomForegroundColor(color) {
 	const parsed = parseCssColor(color);
 	if (!parsed || parsed.opacity < 100) return color;
@@ -296,7 +300,7 @@ function getCustomForegroundColor(color) {
 		if (customForegroundBackgroundMixes.every((backgroundWeight) => {
 			const lightBackground = mixOpaqueColors(parsed, backgroundWeight, white);
 			const darkBackground = mixOpaqueColors(parsed, backgroundWeight, darkBody);
-			return contrastRatio(lightForeground, lightBackground) >= 4.5 && contrastRatio(darkForeground, darkBackground) >= 4.5;
+			return contrastRatio(lightForeground, lightBackground) >= customForegroundMinimumContrast && contrastRatio(darkForeground, darkBackground) >= customForegroundMinimumContrast;
 		})) break;
 		colorPercent -= 1;
 	}

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

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const alertParts: readonly ["root", "icon", "title", "description", "body", "action", "close"];
 export type AlertPart = (typeof alertParts)[number];
-export declare const alertColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const alertColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const alertVariants: readonly ["subtle", "surface", "outline", "solid"];
 export declare const alertRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl"];
 export type AlertColor = ComponentColorValue;

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

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const avatarParts: readonly ["root", "image", "fallback"];
 export type AvatarPart = (typeof avatarParts)[number];
-export declare const avatarColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const avatarColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const avatarSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const avatarRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export declare const avatarVariants: readonly ["solid", "subtle", "surface", "outline"];

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

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const badgeParts: readonly ["root", "left", "label", "right"];
 export type BadgePart = (typeof badgeParts)[number];
-export declare const badgeColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const badgeColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const badgeSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const badgeRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export declare const badgeVariants: readonly ["solid", "subtle", "surface", "outline"];

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

@@ -1,3 +1,3 @@
 export { default as Calendar } from './calendar.js';
 export { calendarParts, calendarRadiuses, calendarSizes, calendarWeekdayFormats } from './types.js';
-export type { CalendarDay, CalendarDaySlotProps, CalendarDisabledDates, CalendarPart, CalendarProps, CalendarRadius, CalendarSize, CalendarWeekday, CalendarWeekdayFormat, } from './types.js';
+export type { CalendarDay, CalendarDaySlotProps, CalendarDisabledDates, CalendarGetDayAriaLabel, CalendarPart, CalendarProps, CalendarRadius, CalendarSize, CalendarWeekday, CalendarWeekdayFormat, } from './types.js';

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

@@ -9,6 +9,7 @@ export type CalendarSize = (typeof calendarSizes)[number];
 export type CalendarRadius = (typeof calendarRadiuses)[number];
 export type CalendarWeekdayFormat = (typeof calendarWeekdayFormats)[number];
 export type CalendarDisabledDates = DisabledDateRule;
+export type CalendarGetDayAriaLabel = (day: Readonly<CalendarDay>) => string;
 export interface CalendarDay {
     date: Date;
     key: string;
@@ -43,11 +44,13 @@ export interface CalendarProps extends StylesApiProps<CalendarPart> {
     disabledDates?: CalendarDisabledDates;
     fixedWeeks?: boolean;
     hideOutsideDates?: boolean;
+    showHeader?: boolean;
     disabled?: boolean;
     readonly?: boolean;
     size?: CalendarSize;
     radius?: CalendarRadius;
     ariaLabel?: string;
+    getDayAriaLabel?: CalendarGetDayAriaLabel;
     previousLabel?: string;
     nextLabel?: string;
 }

package/dist/components/date-picker/index.d.ts

@@ -1,4 +1,4 @@
 export { default as DatePicker } from './date-picker.js';
 export { datePickerParts } from './types.js';
-export type { DatePickerDaySlotProps, DatePickerFormat, DatePickerParse, DatePickerPart, DatePickerProps, } from './types.js';
+export type { DatePickerDaySlotProps, DatePickerFormat, DatePickerGetDayAriaLabel, DatePickerParse, DatePickerPart, DatePickerProps, } from './types.js';
 export { defaultDatePickerFormat, formatDatePickerValue, normalizeDatePickerValue, parseDatePickerValue, } from './datePickerModel.js';

package/dist/components/date-picker/types.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
-import { CalendarDaySlotProps, CalendarDisabledDates, CalendarRadius, CalendarSize, CalendarWeekdayFormat } from '../calendar/types.js';
+import { CalendarDaySlotProps, CalendarDisabledDates, CalendarGetDayAriaLabel, CalendarRadius, CalendarSize, CalendarWeekdayFormat } from '../calendar/types.js';
 import { InputRadius, InputSize } from '../input/types.js';
 import { PopoverPlacement } from '../popover/types.js';
 export declare const datePickerParts: readonly ["root", "control", "input", "clear", "indicator", "content", "calendar", "calendarHeader", "calendarControl", "calendarMonthLabel", "calendarWeekdays", "calendarWeekday", "calendarGrid", "calendarWeek", "calendarDayCell", "calendarDay"];
@@ -8,6 +8,7 @@ export type DatePickerPart = (typeof datePickerParts)[number];
 export type DatePickerFormat = (date: Date) => string;
 export type DatePickerParse = (value: string) => Date | null;
 export type DatePickerDaySlotProps = CalendarDaySlotProps;
+export type DatePickerGetDayAriaLabel = CalendarGetDayAriaLabel;
 export interface DatePickerProps extends StylesApiProps<DatePickerPart> {
     id?: string;
     name?: string;
@@ -27,6 +28,7 @@ export interface DatePickerProps extends StylesApiProps<DatePickerPart> {
     disabledDates?: CalendarDisabledDates;
     fixedWeeks?: boolean;
     hideOutsideDates?: boolean;
+    getDayAriaLabel?: DatePickerGetDayAriaLabel;
     allowInput?: boolean;
     clearable?: boolean;
     closeOnSelect?: boolean;

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

@@ -3,7 +3,7 @@ import { StylesApiProps } from '../../styles-api.js';
 import { ComputedRef, CSSProperties } from 'vue';
 export declare const paginationParts: readonly ["root", "items", "control", "page", "ellipsis"];
 export type PaginationPart = (typeof paginationParts)[number];
-export declare const paginationColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const paginationColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const paginationSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const paginationRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type PaginationColor = ComponentColorValue;

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

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const progressParts: readonly ["root", "label", "value", "track", "indicator"];
 export type ProgressPart = (typeof progressParts)[number];
-export declare const progressColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const progressColors: readonly ["primary", "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/segmented-control/types.d.ts

@@ -2,7 +2,7 @@ import { InputHTMLAttributes } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
 import { ComponentColorValue } from '../../utils/componentColors.js';
 export declare const segmentedControlParts: readonly ["root", "control", "input", "indicator", "label"];
-export declare const segmentedControlColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const segmentedControlColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const segmentedControlSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const segmentedControlRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export declare const segmentedControlOrientations: readonly ["horizontal", "vertical"];

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

@@ -6,7 +6,7 @@ export declare const sliderParts: readonly ["root", "label", "value", "track", "
 export declare const rangeSliderParts: readonly ["root", "label", "value", "track", "range", "input", "thumb", "mark", "markLabel", "tooltip"];
 export type SliderPart = (typeof sliderParts)[number];
 export type RangeSliderPart = (typeof rangeSliderParts)[number];
-export declare const sliderColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const sliderColors: readonly ["primary", "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];

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

@@ -42,7 +42,7 @@ export declare function useSlider(props: SliderStateProps, onChange: (value: num
     tooltipFormattedValue: import('vue').ComputedRef<string | number>;
     tooltipContent: import('vue').ComputedRef<string>;
     onInput: (event: Event) => void;
-    onTooltipPointerDown: (event: PointerEvent) => void;
+    onTrackPointerDown: (event: PointerEvent) => boolean;
     onTooltipPointerMove: (event: PointerEvent) => void;
     onTooltipTrackEnter: (event: PointerEvent) => void;
     onTooltipTrackLeave: () => void;

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

@@ -0,0 +1,15 @@
+import { ComputedRef, Ref } from 'vue';
+import { SliderBounds } from './sliderModel.js';
+import { SliderOrientation } from './types.js';
+interface UseSliderPointerOptions {
+    bounds: ComputedRef<SliderBounds>;
+    disabled: () => boolean;
+    inputRef: Ref<HTMLInputElement | null>;
+    orientation: () => SliderOrientation;
+    step: ComputedRef<number | 'any'>;
+    updateValue: (value: number) => void;
+}
+export declare function useSliderPointer(options: UseSliderPointerOptions): {
+    onPointerDown: (event: PointerEvent) => boolean;
+};
+export {};

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

@@ -30,4 +30,5 @@ export declare function useSliderValueState(props: SliderStateProps, onChange: (
     hasMarkLabels: import('vue').ComputedRef<boolean>;
     trackSlotProps: import('vue').ComputedRef<SliderTrackSlotProps>;
     onInput: (event: Event) => void;
+    updateValue: (value: number) => void;
 };

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

@@ -6,7 +6,7 @@ export declare const toastParts: readonly ["root", "icon", "title", "description
 export declare const toastViewportParts: readonly ["root", "item", "toast", "toastIcon", "toastTitle", "toastDescription", "toastBody", "toastAction", "toastClose"];
 export type ToastPart = (typeof toastParts)[number];
 export type ToastViewportPart = (typeof toastViewportParts)[number];
-export declare const toastColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const toastColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const toastVariants: readonly ["subtle", "surface", "outline", "solid"];
 export declare const toastRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl"];
 export declare const toastPositions: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];

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

@@ -0,0 +1,3 @@
+export { default as Toolbar } from './toolbar.js';
+export { toolbarOrientations, toolbarParts } from './types.js';
+export type { ToolbarOrientation, ToolbarPart, ToolbarProps } from './types.js';

package/dist/components/toolbar/index.js

@@ -0,0 +1,2 @@
+import { n as toolbarParts, r as toolbar_default, t as toolbarOrientations } from "../../toolbar.js";
+export { toolbar_default as Toolbar, toolbarOrientations, toolbarParts };

package/dist/components/toolbar/toolbar.d.ts

@@ -0,0 +1,24 @@
+import { ToolbarProps } from './types.js';
+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<ToolbarProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        nativeElement: import('vue').ShallowRef<HTMLElement | null, HTMLElement | null>;
+        focus: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => 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/toolbar/types.d.ts

@@ -0,0 +1,12 @@
+import { StylesApiProps } from '../../styles-api.js';
+export declare const toolbarParts: readonly ["root"];
+export declare const toolbarOrientations: readonly ["horizontal", "vertical"];
+export type ToolbarPart = (typeof toolbarParts)[number];
+export type ToolbarOrientation = (typeof toolbarOrientations)[number];
+export interface ToolbarProps extends StylesApiProps<ToolbarPart> {
+    id?: string;
+    orientation?: ToolbarOrientation;
+    ariaLabel?: string;
+    describedby?: string;
+    labelledby?: string;
+}

package/dist/components/toolbar/useToolbar.d.ts

@@ -0,0 +1,7 @@
+import { ShallowRef } from 'vue';
+import { ToolbarOrientation } from './types.js';
+export declare function useToolbar(root: ShallowRef<HTMLElement | null>, getOrientation: () => ToolbarOrientation): {
+    focus: () => void;
+    onFocusin: (event: FocusEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};

package/dist/date-picker.css

@@ -1,15 +1,15 @@
 @layer ropav.components {
-.rp-date-picker[data-v-c39b1387] {
+.rp-date-picker[data-v-4508ba14] {
     display: inline-flex;
     max-width: 100%;
     font-family: var(--rp-font-family);
     vertical-align: middle;
 }
-.rp-date-picker[data-v-c39b1387] .rp-input {
+.rp-date-picker[data-v-4508ba14] .rp-input {
     width: 100%;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
 }
-.rp-date-picker__clear[data-v-c39b1387], .rp-date-picker__indicator[data-v-c39b1387] {
+.rp-date-picker__clear[data-v-4508ba14], .rp-date-picker__indicator[data-v-4508ba14] {
     padding: 0;
     font: inherit;
     background: none;
@@ -23,22 +23,22 @@
     color: var(--rp-color-control-icon);
     transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-date-picker__clear[data-v-c39b1387]:hover:not(:disabled), .rp-date-picker__indicator[data-v-c39b1387]:hover:not(:disabled) {
+.rp-date-picker__clear[data-v-4508ba14]:hover:not(:disabled), .rp-date-picker__indicator[data-v-4508ba14]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
 }
-.rp-date-picker__clear[data-v-c39b1387]:focus-visible, .rp-date-picker__indicator[data-v-c39b1387]:focus-visible {
+.rp-date-picker__clear[data-v-4508ba14]:focus-visible, .rp-date-picker__indicator[data-v-4508ba14]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-date-picker__clear[data-v-c39b1387]:disabled, .rp-date-picker__indicator[data-v-c39b1387]:disabled {
+.rp-date-picker__clear[data-v-4508ba14]:disabled, .rp-date-picker__indicator[data-v-4508ba14]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-date-picker__clear[data-v-c39b1387] >  svg, .rp-date-picker__indicator[data-v-c39b1387] >  svg {
+.rp-date-picker__clear[data-v-4508ba14] >  svg, .rp-date-picker__indicator[data-v-4508ba14] >  svg {
     width: 1em;
     height: 1em;
 }
-.rp-date-picker__clear--hidden[data-v-c39b1387] {
+.rp-date-picker__clear--hidden[data-v-4508ba14] {
     visibility: hidden;
     pointer-events: none;
 }

package/dist/date-picker.js

@@ -484,7 +484,7 @@ function useDatePicker(props, emit, elements) {
 }
 //#endregion
 //#region src/components/date-picker/date-picker.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-c39b1387></button>");
+var t0 = template("<button data-v-4508ba14></button>");
 //#endregion
 //#region src/components/date-picker/date-picker.vue
 var date_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -525,6 +525,7 @@ var date_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			type: Boolean,
 			default: false
 		},
+		getDayAriaLabel: {},
 		allowInput: {
 			type: Boolean,
 			default: false
@@ -749,6 +750,7 @@ var date_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					"disabled-dates": () => __props.disabledDates,
 					"fixed-weeks": () => __props.fixedWeeks,
 					"hide-outside-dates": () => __props.hideOutsideDates,
+					"get-day-aria-label": () => __props.getDayAriaLabel,
 					readonly: () => __props.readonly,
 					size: () => __props.calendarSize ?? __props.size,
 					radius: () => __props.calendarRadius ?? __props.radius,
@@ -784,7 +786,7 @@ var date_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-c39b1387"]]);
+}), [["__scopeId", "data-v-4508ba14"]]);
 //#endregion
 //#region src/components/date-picker/types.ts
 var datePickerParts = [

package/dist/dropdown-menu.css

@@ -18,17 +18,17 @@
     display: contents;
 }
 .rp-dropdown-menu__content {
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     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;
     position: absolute;
-    z-index: 100;
-    min-width: 180px;
+    z-index: var(--rp-z-index-dropdown);
+    min-width: var(--rp-component-menu-min-width);
     max-width: min(24rem, 100vw - var(--rp-spacing-6));
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     overflow-y: auto;
     padding: var(--rp-spacing-1);
     color: var(--rp-color-text);
@@ -172,7 +172,7 @@
     color: var(--rp-color-dimmed);
 }
 .rp-dropdown-menu__submenu {
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     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);
@@ -181,9 +181,9 @@
     position: absolute;
     top: calc(-1 * var(--rp-spacing-1));
     left: calc(100% + var(--rp-spacing-1));
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     max-width: min(24rem, 100vw - var(--rp-spacing-6));
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     overflow-y: auto;
     padding: var(--rp-spacing-1);
     color: var(--rp-color-text);

package/dist/field.css

@@ -7,7 +7,7 @@
     font-family: var(--rp-font-family);
     color: var(--rp-color-text);
 }
-html.dark .rp-field[data-v-babf7642], [data-rp-color-scheme=dark] .rp-field[data-v-babf7642] {
+[data-scheme=dark] .rp-field[data-v-babf7642] {
     --_rp-field-danger: var(--rp-color-red-light-color);
 }
 .rp-field__label[data-v-babf7642] {

package/dist/focusNavigation.js

@@ -1,8 +1,8 @@
 import { n as getNextEnabledIndex, t as getEnabledIndexes } from "./collectionNavigation.js";
 import { t as isElement } from "./query.js";
 //#region src/utils/dom/focusNavigation.ts
-function isDisabled(element) {
-	return element.matches(":disabled");
+function isIneligible(element) {
+	return element.matches(":disabled") || element.closest("[hidden], [inert]") !== null;
 }
 function getDirection(key, orientation) {
 	if (orientation === "vertical") {
@@ -16,22 +16,28 @@ function getDirection(key, orientation) {
 function getScopedItems(collection, options) {
 	return Array.from(collection.querySelectorAll(options.itemSelector)).filter((item) => item.closest(options.collectionSelector) === collection);
 }
+function setFocusNavigationTabStop(collection, preferredItem, options) {
+	const items = getScopedItems(collection, options);
+	const target = preferredItem && items.includes(preferredItem) && !isIneligible(preferredItem) ? preferredItem : items.find((item) => !isIneligible(item)) ?? null;
+	for (const item of items) item.tabIndex = item === target ? 0 : -1;
+	return target;
+}
 function getFocusNavigationTarget(event, collection, options) {
 	if (!isElement(event.target)) return void 0;
 	const currentItem = event.target.closest(options.itemSelector);
-	if (!currentItem || currentItem.closest(options.collectionSelector) !== collection || isDisabled(currentItem)) return;
+	if (!currentItem || currentItem.closest(options.collectionSelector) !== collection || isIneligible(currentItem)) return;
 	const items = getScopedItems(collection, options);
 	const currentIndex = items.indexOf(currentItem);
 	if (currentIndex < 0) return void 0;
-	const enabledIndexes = getEnabledIndexes(items, isDisabled);
+	const enabledIndexes = getEnabledIndexes(items, isIneligible);
 	if (enabledIndexes.length === 0) return void 0;
 	if (event.key === "Home") return items[enabledIndexes[0]];
 	if (event.key === "End") return items[enabledIndexes[enabledIndexes.length - 1]];
 	let direction = getDirection(event.key, options.orientation);
 	if (!direction) return void 0;
 	if (options.orientation === "horizontal" && collection.ownerDocument.defaultView?.getComputedStyle(collection).direction === "rtl") direction = direction === 1 ? -1 : 1;
-	const nextIndex = getNextEnabledIndex(items, currentIndex, direction, isDisabled);
+	const nextIndex = getNextEnabledIndex(items, currentIndex, direction, isIneligible);
 	return nextIndex === void 0 ? void 0 : items[nextIndex];
 }
 //#endregion
-export { getFocusNavigationTarget as t };
+export { setFocusNavigationTabStop as n, getFocusNavigationTarget as t };

package/dist/hover-card.css

@@ -11,7 +11,7 @@
     --_rp-hover-card-radius: var(--rp-radius-sm);
     --_rp-hover-card-arrow-size: 0.5rem;
     position: absolute;
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     box-sizing: border-box;
     width: max-content;
     max-width: min(22rem, 100vw - var(--rp-spacing-6));

package/dist/index.d.ts

@@ -45,4 +45,5 @@ export * from './components/tags-input/index.js';
 export * from './components/teleport-provider/index.js';
 export * from './components/textarea/index.js';
 export * from './components/toast/index.js';
+export * from './components/toolbar/index.js';
 export * from './components/tooltip/index.js';

package/dist/index.js

@@ -60,5 +60,6 @@ import { n as tags_input_default, t as tagsInputParts } from "./tags-input.js";
 import { t as teleport_provider_default } from "./teleport-provider.js";
 import { n as textarea_default, t as textareaParts } from "./textarea.js";
 import { a as toastColors, c as toastRadiuses, d as toastViewportParts, f as createToastStore, i as useToast, l as toastTypes, n as toast_viewport_default, o as toastParts, p as toast_default, r as toast_provider_default, s as toastPositions, t as useToastState, u as toastVariants } from "./toast.js";
+import { n as toolbarParts, r as toolbar_default, t as toolbarOrientations } from "./toolbar.js";
 import { t as tooltipParts } from "./tooltip2.js";
-export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, calendar_default as Calendar, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, date_picker_default as DatePicker, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, dropzone_default as Dropzone, field_default as Field, file_input_default as FileInput, focus_trap_default as FocusTrap, hover_card_default as HoverCard, icon_button_default as IconButton, input_default as Input, modal_default as Modal, multi_select_default as MultiSelect, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, pagination_default as Pagination, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, tags_input_default as TagsInput, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, calendarParts, calendarRadiuses, calendarSizes, calendarWeekdayFormats, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, comboboxParts, createToastStore, datePickerParts, defaultDatePickerFormat, dropdownMenuParts, dropzoneErrorCodes, dropzoneParts, dropzoneStatuses, fieldParts, fileInputParts, focusTrapParts, formatDatePickerValue, getPaginationItems, hoverCardParts, hoverCardPlacements, iconButtonParts, inputParts, modalParts, multiSelectParts, normalizeDatePickerValue, normalizePaginationPage, normalizePaginationTotal, numberInputParts, overlayParts, paginationColors, paginationParts, paginationRadiuses, paginationSizes, parseDatePickerValue, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes, segmentedControlColors, segmentedControlOrientations, segmentedControlParts, segmentedControlRadiuses, segmentedControlSizes, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, tagsInputParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useControllableValue, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, usePagination, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, calendar_default as Calendar, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, combobox_default as Combobox, date_picker_default as DatePicker, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, dropzone_default as Dropzone, field_default as Field, file_input_default as FileInput, focus_trap_default as FocusTrap, hover_card_default as HoverCard, icon_button_default as IconButton, input_default as Input, modal_default as Modal, multi_select_default as MultiSelect, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, pagination_default as Pagination, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, scroll_area_default as ScrollArea, segmented_control_default as SegmentedControl, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, tags_input_default as TagsInput, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, toolbar_default as Toolbar, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, calendarParts, calendarRadiuses, calendarSizes, calendarWeekdayFormats, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, comboboxParts, createToastStore, datePickerParts, defaultDatePickerFormat, dropdownMenuParts, dropzoneErrorCodes, dropzoneParts, dropzoneStatuses, fieldParts, fileInputParts, focusTrapParts, formatDatePickerValue, getPaginationItems, hoverCardParts, hoverCardPlacements, iconButtonParts, inputParts, modalParts, multiSelectParts, normalizeDatePickerValue, normalizePaginationPage, normalizePaginationTotal, numberInputParts, overlayParts, paginationColors, paginationParts, paginationRadiuses, paginationSizes, parseDatePickerValue, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes, segmentedControlColors, segmentedControlOrientations, segmentedControlParts, segmentedControlRadiuses, segmentedControlSizes, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, tagsInputParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, toolbarOrientations, toolbarParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useControllableValue, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, usePagination, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };

package/dist/modal.css

@@ -5,7 +5,7 @@
     --_rp-modal-radius: var(--rp-radius-sm);
     position: fixed;
     inset: 0;
-    z-index: 1000;
+    z-index: var(--rp-z-index-tooltip);
     box-sizing: border-box;
     display: grid;
     place-items: center;