ropav 0.1.8 → 0.2.0

package/dist/calendar.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-calendar[data-v-d3ae1d38] {
+.rp-calendar[data-v-9df33d1a] {
     --_rp-calendar-day-size: var(--rp-size-control-sm);
     --_rp-calendar-font-size: var(--rp-font-size-sm);
     --_rp-calendar-gap: var(--rp-spacing-1);
@@ -15,59 +15,59 @@
     line-height: 1;
     vertical-align: middle;
 }
-.rp-calendar--size-xs[data-v-d3ae1d38] {
+.rp-calendar--size-xs[data-v-9df33d1a] {
     --_rp-calendar-day-size: var(--rp-size-control-xs);
     --_rp-calendar-font-size: var(--rp-font-size-xs);
     --_rp-calendar-gap: calc(var(--rp-spacing-1) / 2);
 }
-.rp-calendar--size-sm[data-v-d3ae1d38] {
+.rp-calendar--size-sm[data-v-9df33d1a] {
     --_rp-calendar-day-size: var(--rp-size-control-sm);
     --_rp-calendar-font-size: var(--rp-font-size-sm);
     --_rp-calendar-gap: var(--rp-spacing-1);
 }
-.rp-calendar--size-md[data-v-d3ae1d38] {
+.rp-calendar--size-md[data-v-9df33d1a] {
     --_rp-calendar-day-size: var(--rp-size-control-sm);
     --_rp-calendar-font-size: var(--rp-font-size-sm);
     --_rp-calendar-gap: var(--rp-spacing-1);
 }
-.rp-calendar--size-lg[data-v-d3ae1d38] {
+.rp-calendar--size-lg[data-v-9df33d1a] {
     --_rp-calendar-day-size: var(--rp-size-control-md);
     --_rp-calendar-font-size: var(--rp-font-size-md);
     --_rp-calendar-gap: var(--rp-spacing-1);
 }
-.rp-calendar--size-xl[data-v-d3ae1d38] {
+.rp-calendar--size-xl[data-v-9df33d1a] {
     --_rp-calendar-day-size: var(--rp-size-control-lg);
     --_rp-calendar-font-size: var(--rp-font-size-lg);
     --_rp-calendar-gap: var(--rp-spacing-2);
 }
-.rp-calendar--radius-none[data-v-d3ae1d38] {
+.rp-calendar--radius-none[data-v-9df33d1a] {
     --_rp-calendar-radius: 0;
 }
-.rp-calendar--radius-xs[data-v-d3ae1d38] {
+.rp-calendar--radius-xs[data-v-9df33d1a] {
     --_rp-calendar-radius: var(--rp-radius-xs);
 }
-.rp-calendar--radius-sm[data-v-d3ae1d38] {
+.rp-calendar--radius-sm[data-v-9df33d1a] {
     --_rp-calendar-radius: var(--rp-radius-sm);
 }
-.rp-calendar--radius-md[data-v-d3ae1d38] {
+.rp-calendar--radius-md[data-v-9df33d1a] {
     --_rp-calendar-radius: var(--rp-radius-md);
 }
-.rp-calendar--radius-lg[data-v-d3ae1d38] {
+.rp-calendar--radius-lg[data-v-9df33d1a] {
     --_rp-calendar-radius: var(--rp-radius-lg);
 }
-.rp-calendar--radius-xl[data-v-d3ae1d38] {
+.rp-calendar--radius-xl[data-v-9df33d1a] {
     --_rp-calendar-radius: var(--rp-radius-xl);
 }
-.rp-calendar--radius-full[data-v-d3ae1d38] {
+.rp-calendar--radius-full[data-v-9df33d1a] {
     --_rp-calendar-radius: var(--rp-radius-full);
 }
-.rp-calendar__header[data-v-d3ae1d38] {
+.rp-calendar__header[data-v-9df33d1a] {
     display: grid;
     grid-template-columns: var(--_rp-calendar-day-size) 1fr var(--_rp-calendar-day-size);
     align-items: center;
     gap: var(--_rp-calendar-gap);
 }
-.rp-calendar__month-label[data-v-d3ae1d38] {
+.rp-calendar__month-label[data-v-9df33d1a] {
     overflow: hidden;
     font-weight: var(--rp-font-weight-semibold);
     line-height: var(--_rp-calendar-day-size);
@@ -75,7 +75,18 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.rp-calendar__control[data-v-d3ae1d38], .rp-calendar__day[data-v-d3ae1d38] {
+.rp-calendar__month-label--visually-hidden[data-v-9df33d1a] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+.rp-calendar__control[data-v-9df33d1a], .rp-calendar__day[data-v-9df33d1a] {
     padding: 0;
     font: inherit;
     background: none;
@@ -91,60 +102,60 @@
     color: inherit;
     transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-calendar__control[data-v-d3ae1d38]:focus-visible, .rp-calendar__day[data-v-d3ae1d38]:focus-visible {
+.rp-calendar__control[data-v-9df33d1a]:focus-visible, .rp-calendar__day[data-v-9df33d1a]:focus-visible {
     outline: none;
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 @media (forced-colors: active) {
-.rp-calendar__control[data-v-d3ae1d38]:focus-visible, .rp-calendar__day[data-v-d3ae1d38]:focus-visible {
+.rp-calendar__control[data-v-9df33d1a]:focus-visible, .rp-calendar__day[data-v-9df33d1a]:focus-visible {
       outline: var(--rp-border-width-medium) solid Highlight;
       outline-offset: 2px;
       box-shadow: none;
 }
 }
-.rp-calendar__control[data-v-d3ae1d38] {
+.rp-calendar__control[data-v-9df33d1a] {
     color: var(--rp-color-control-icon);
 }
-.rp-calendar__control[data-v-d3ae1d38]:hover:not(:disabled) {
+.rp-calendar__control[data-v-9df33d1a]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
     background-color: var(--rp-color-default-hover);
 }
-.rp-calendar__control[data-v-d3ae1d38]:disabled {
+.rp-calendar__control[data-v-9df33d1a]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-calendar__control[data-v-d3ae1d38] >  svg {
+.rp-calendar__control[data-v-9df33d1a] >  svg {
     width: 1em;
     height: 1em;
 }
-.rp-calendar__grid[data-v-d3ae1d38] {
+.rp-calendar__grid[data-v-9df33d1a] {
     border-spacing: var(--_rp-calendar-gap);
     margin: calc(-1 * var(--_rp-calendar-gap));
     table-layout: fixed;
 }
-.rp-calendar__weekday[data-v-d3ae1d38], .rp-calendar__day-cell[data-v-d3ae1d38] {
+.rp-calendar__weekday[data-v-9df33d1a], .rp-calendar__day-cell[data-v-9df33d1a] {
     box-sizing: border-box;
     width: var(--_rp-calendar-day-size);
     height: var(--_rp-calendar-day-size);
     padding: 0;
     text-align: center;
 }
-.rp-calendar__weekday[data-v-d3ae1d38] {
+.rp-calendar__weekday[data-v-9df33d1a] {
     color: var(--rp-color-dimmed);
     font-size: 0.85em;
     font-weight: var(--rp-font-weight-medium);
 }
-.rp-calendar__day[data-v-d3ae1d38] {
+.rp-calendar__day[data-v-9df33d1a] {
     position: relative;
     font: inherit;
 }
-.rp-calendar__day[data-v-d3ae1d38]:hover:not(:disabled):not(.rp-calendar__day--selected) {
+.rp-calendar__day[data-v-9df33d1a]:hover:not(:disabled):not(.rp-calendar__day--selected) {
     background-color: var(--rp-color-default-hover);
 }
-.rp-calendar__day--outside[data-v-d3ae1d38] {
+.rp-calendar__day--outside[data-v-9df33d1a] {
     color: var(--rp-color-dimmed);
 }
-.rp-calendar__day--today[data-v-d3ae1d38]::after {
+.rp-calendar__day--today[data-v-9df33d1a]::after {
     position: absolute;
     inset-inline-start: 50%;
     bottom: max(2px, var(--_rp-calendar-day-size) * 0.1);
@@ -155,18 +166,18 @@
     content: "";
     transform: translateX(-50%);
 }
-.rp-calendar__day--selected[data-v-d3ae1d38] {
+.rp-calendar__day--selected[data-v-9df33d1a] {
     color: var(--rp-color-control-selected-fg);
     background-color: var(--rp-color-control-selected-bg);
 }
-.rp-calendar__day--selected[data-v-d3ae1d38]:hover:not(:disabled) {
-    background-color: var(--rp-primary-color-filled-hover);
+.rp-calendar__day--selected[data-v-9df33d1a]:hover:not(:disabled) {
+    background-color: var(--rp-color-primary-filled-hover);
 }
-.rp-calendar__day[data-v-d3ae1d38]:disabled {
+.rp-calendar__day[data-v-9df33d1a]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-calendar--disabled[data-v-d3ae1d38] {
+.rp-calendar--disabled[data-v-9df33d1a] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }

package/dist/calendar.js

@@ -6,7 +6,7 @@ import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as chevron_left_default } from "./chevron-left.js";
 import { t as chevron_right_default } from "./chevron-right.js";
-import { child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setText, shallowRef, template, toDisplayString, txt, unref, useId, watch } from "vue";
+import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, shallowRef, template, toDisplayString, txt, unref, useId, watch } from "vue";
 //#region src/utils/date.ts
 function isValidDate(value) {
 	return value instanceof Date && Number.isFinite(value.getTime());
@@ -499,12 +499,14 @@ function useCalendar(props, emit) {
 }
 //#endregion
 //#region src/components/calendar/calendar.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<th data-v-d3ae1d38> ");
-var t1 = template(" ");
-var t2 = template("<button data-v-d3ae1d38>");
-var t3 = template("<td data-v-d3ae1d38>");
-var t4 = template("<tr data-v-d3ae1d38>");
-var t5 = template("<div data-v-d3ae1d38><div data-v-d3ae1d38><button data-v-d3ae1d38></button><span data-v-d3ae1d38> </span><button data-v-d3ae1d38></button></div><table data-v-d3ae1d38><thead data-v-d3ae1d38><tr data-v-d3ae1d38></thead><tbody data-v-d3ae1d38>", 1);
+var t0 = template("<div data-v-9df33d1a><button data-v-9df33d1a></button><span data-v-9df33d1a> </span><button data-v-9df33d1a></button>");
+var t1 = template("<span data-v-9df33d1a> ");
+var t2 = template("<th data-v-9df33d1a> ");
+var t3 = template(" ");
+var t4 = template("<button data-v-9df33d1a>");
+var t5 = template("<td data-v-9df33d1a>");
+var t6 = template("<tr data-v-9df33d1a>");
+var t7 = template("<div data-v-9df33d1a><table data-v-9df33d1a><thead data-v-9df33d1a><tr data-v-9df33d1a></thead><tbody data-v-9df33d1a>", 1);
 //#endregion
 //#region src/components/calendar/calendar.vue
 var calendar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -532,6 +534,10 @@ var calendar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -543,6 +549,7 @@ var calendar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		size: { default: "md" },
 		radius: { default: "sm" },
 		ariaLabel: { default: void 0 },
+		getDayAriaLabel: {},
 		previousLabel: { default: "Previous month" },
 		nextLabel: { default: "Next month" },
 		classNames: {},
@@ -584,6 +591,9 @@ var calendar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-disabled": toPresenceAttribute(props.disabled || day.disabled)
 			};
 		}
+		function getDayLabel(day) {
+			return props.getDayAriaLabel?.(day) ?? day.ariaLabel;
+		}
 		function isFocusable(day) {
 			return !props.disabled && !day.disabled && isSameDate(day.date, focusableDate.value);
 		}
@@ -593,122 +603,137 @@ var calendar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				(rootRef.value?.querySelector(".rp-calendar__day[tabindex=\"0\"]") ?? rootRef.value?.querySelector(".rp-calendar__control:not(:disabled)"))?.focus({ preventScroll: true });
 			}
 		});
-		const _setTemplateRef = createTemplateRefSetter();
-		const n29 = t5();
-		const n9 = child(n29);
-		const n3 = child(n9);
-		const n4 = next(n3, 1);
-		const n8 = next(n4, 2);
-		const n28 = next(n9, 1);
-		const n14 = child(n28);
-		const n13 = child(n14);
-		const n27 = next(n14, 1);
-		renderEffect(() => {
-			const _getPartAttrs = unref(getPartAttrs);
-			setDynamicProps(n29, [rootAttrs.value]);
-			setDynamicProps(n9, [_getPartAttrs("header", { class: "rp-calendar__header" })]);
-			setDynamicProps(n3, [_getPartAttrs("previousControl", { class: "rp-calendar__control rp-calendar__control--previous" }), {
-				type: "button",
-				"aria-label": __props.previousLabel,
-				disabled: unref(previousDisabled)
-			}]);
-		});
-		setInsertionState(n3, null, 0);
-		createSlot("previous-icon", null, () => {
-			return createComponent(unref(chevron_left_default), { "aria-hidden": "true" });
-		}, 1);
-		on(n3, "click", () => unref(navigateMonth)(-1));
-		const x4 = txt(n4);
-		renderEffect(() => {
-			const _getPartAttrs = unref(getPartAttrs);
-			setDynamicProps(n4, [
-				{ id: monthLabelId },
-				_getPartAttrs("monthLabel", { class: "rp-calendar__month-label" }),
-				{ "aria-live": "polite" }
-			]);
-			setText(x4, toDisplayString(unref(monthLabel)));
-			setDynamicProps(n8, [_getPartAttrs("nextControl", { class: "rp-calendar__control rp-calendar__control--next" }), {
-				type: "button",
-				"aria-label": __props.nextLabel,
-				disabled: unref(nextDisabled)
-			}]);
-		});
-		setInsertionState(n8, null, 0);
-		createSlot("next-icon", null, () => {
-			return createComponent(unref(chevron_right_default), { "aria-hidden": "true" });
-		}, 1);
-		on(n8, "click", () => unref(navigateMonth)(1));
+		const n33 = t7();
+		const n32 = child(n33, 1);
+		const n18 = child(n32);
+		const n17 = child(n18);
+		const n31 = next(n18, 1);
+		renderEffect(() => setDynamicProps(n33, [rootAttrs.value]));
+		setInsertionState(n33, 0);
+		createIf(() => __props.showHeader, () => {
+			const n11 = t0();
+			const n5 = child(n11);
+			const n6 = next(n5, 1);
+			const n10 = next(n6, 2);
+			renderEffect(() => {
+				const _getPartAttrs = unref(getPartAttrs);
+				setDynamicProps(n11, [_getPartAttrs("header", { class: "rp-calendar__header" })]);
+				setDynamicProps(n5, [_getPartAttrs("previousControl", { class: "rp-calendar__control rp-calendar__control--previous" }), {
+					type: "button",
+					"aria-label": __props.previousLabel,
+					disabled: unref(previousDisabled)
+				}]);
+			});
+			setInsertionState(n5, null, 0);
+			createSlot("previous-icon", null, () => {
+				return createComponent(unref(chevron_left_default), { "aria-hidden": "true" });
+			}, 1);
+			on(n5, "click", () => unref(navigateMonth)(-1));
+			const x6 = txt(n6);
+			renderEffect(() => {
+				const _getPartAttrs = unref(getPartAttrs);
+				setDynamicProps(n6, [
+					{ id: monthLabelId },
+					_getPartAttrs("monthLabel", { class: "rp-calendar__month-label" }),
+					{ "aria-live": "polite" }
+				]);
+				setText(x6, toDisplayString(unref(monthLabel)));
+				setDynamicProps(n10, [_getPartAttrs("nextControl", { class: "rp-calendar__control rp-calendar__control--next" }), {
+					type: "button",
+					"aria-label": __props.nextLabel,
+					disabled: unref(nextDisabled)
+				}]);
+			});
+			setInsertionState(n10, null, 0);
+			createSlot("next-icon", null, () => {
+				return createComponent(unref(chevron_right_default), { "aria-hidden": "true" });
+			}, 1);
+			on(n10, "click", () => unref(navigateMonth)(1));
+			return n11;
+		}, () => {
+			const n13 = t1();
+			const x13 = txt(n13);
+			renderEffect(() => {
+				setDynamicProps(n13, [
+					{ id: monthLabelId },
+					unref(getPartAttrs)("monthLabel", { class: ["rp-calendar__month-label", "rp-calendar__month-label--visually-hidden"] }),
+					{ "aria-live": "polite" }
+				]);
+				setText(x13, toDisplayString(unref(monthLabel)));
+			});
+			return n13;
+		}, 261);
 		renderEffect(() => {
 			const _getPartAttrs = unref(getPartAttrs);
 			const _ariaLabel = __props.ariaLabel;
-			setDynamicProps(n28, [_getPartAttrs("grid", { class: "rp-calendar__grid" }), {
+			setDynamicProps(n32, [_getPartAttrs("grid", { class: "rp-calendar__grid" }), {
 				role: "grid",
 				"aria-label": _ariaLabel,
 				"aria-labelledby": _ariaLabel ? void 0 : monthLabelId,
 				"aria-readonly": __props.readonly || void 0,
 				"aria-disabled": __props.disabled || void 0
 			}]);
-			setDynamicProps(n14, [_getPartAttrs("weekdays", { class: "rp-calendar__weekdays" })]);
+			setDynamicProps(n18, [_getPartAttrs("weekdays", { class: "rp-calendar__weekdays" })]);
 		});
-		setInsertionState(n13, null, 0);
+		setInsertionState(n17, null, 0);
 		createFor(() => unref(weekdays), (_for_item0) => {
-			const n12 = t0();
-			const x12 = txt(n12);
+			const n16 = t2();
+			const x16 = txt(n16);
 			renderEffect(() => {
 				const _weekday = _for_item0.value;
-				setDynamicProps(n12, [unref(getPartAttrs)("weekday", { class: "rp-calendar__weekday" }), {
+				setDynamicProps(n16, [unref(getPartAttrs)("weekday", { class: "rp-calendar__weekday" }), {
 					scope: "col",
 					"aria-label": _weekday.ariaLabel
 				}]);
-				setText(x12, toDisplayString(_weekday.label));
+				setText(x16, toDisplayString(_weekday.label));
 			});
-			return n12;
+			return n16;
 		}, (weekday) => weekday.key, 9);
-		setInsertionState(n27, null, 0);
+		setInsertionState(n31, null, 0);
 		createFor(() => unref(weeks), (_for_item0, _for_key0) => {
-			const n26 = t4();
-			renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("week", { class: "rp-calendar__week" })]));
-			setInsertionState(n26, null, 0);
+			const n30 = t6();
+			renderEffect(() => setDynamicProps(n30, [unref(getPartAttrs)("week", { class: "rp-calendar__week" })]));
+			setInsertionState(n30, null, 0);
 			createFor(() => _for_item0.value, (_for_item1) => {
-				const n25 = t3();
+				const n29 = t5();
 				renderEffect(() => {
 					const _day = _for_item1.value;
-					setDynamicProps(n25, [unref(getPartAttrs)("dayCell", { class: "rp-calendar__day-cell" }), {
+					setDynamicProps(n29, [unref(getPartAttrs)("dayCell", { class: "rp-calendar__day-cell" }), {
 						role: "gridcell",
 						"aria-selected": _day.hidden ? void 0 : _day.selected
 					}]);
 				});
-				setInsertionState(n25, null, 0);
+				setInsertionState(n29, null, 0);
 				createIf(() => !_for_item1.value.hidden, () => {
-					const n24 = t2();
+					const n28 = t4();
 					renderEffect(() => {
 						const _day = _for_item1.value;
-						setDynamicProps(n24, [getDayAttrs(_day), {
+						setDynamicProps(n28, [getDayAttrs(_day), {
 							type: "button",
 							disabled: __props.disabled || _day.disabled,
-							"aria-label": _day.ariaLabel,
+							"aria-label": getDayLabel(_day),
 							"aria-current": _day.today ? "date" : void 0,
 							tabindex: isFocusable(_day) ? 0 : -1
 						}]);
 					});
-					setInsertionState(n24, null, 0);
+					setInsertionState(n28, null, 0);
 					createSlot("day", { $: [() => _for_item1.value, { select: () => (() => unref(selectDate)(_for_item1.value)) }] }, () => {
-						const n23 = t1();
-						renderEffect(() => setText(n23, toDisplayString(_for_item1.value.label)));
-						return n23;
+						const n27 = t3();
+						renderEffect(() => setText(n27, toDisplayString(_for_item1.value.label)));
+						return n27;
 					}, 1);
-					on(n24, "click", () => unref(selectDate)(_for_item1.value));
-					on(n24, "focus", () => unref(onDayFocus)(_for_item1.value));
-					on(n24, "keydown", ($event) => unref(onDayKeydown)($event, _for_item1.value));
-					return n24;
+					on(n28, "click", () => unref(selectDate)(_for_item1.value));
+					on(n28, "focus", () => unref(onDayFocus)(_for_item1.value));
+					on(n28, "keydown", ($event) => unref(onDayKeydown)($event, _for_item1.value));
+					return n28;
 				});
-				return n25;
+				return n29;
 			}, (day) => day.key, 9);
-			return n26;
+			return n30;
 		}, (week, weekIndex) => weekIndex, 9);
-		_setTemplateRef(n29, rootRef, null, "rootRef");
-		return n29;
+		setStaticTemplateRef(n33, rootRef, null, "rootRef");
+		return n33;
 	}
-}), [["__scopeId", "data-v-d3ae1d38"]]);
+}), [["__scopeId", "data-v-9df33d1a"]]);
 //#endregion
 export { parseDateKey as a, normalizeDate as i, isDateUnavailable as n, toLocalDate as o, isValidDate as r, calendar_default as t };

package/dist/color-input.css

@@ -5,8 +5,8 @@
     --_rp-color-input-preview-inset: calc(
         (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
     );
-    --_rp-color-input-empty-tile: var(--rp-color-gray-3);
-    --_rp-color-input-empty-tile-alt: var(--rp-color-white);
+    --_rp-color-input-empty-tile: var(--rp-color-gray-5);
+    --_rp-color-input-empty-tile-alt: var(--rp-color-gray-1);
     --_rp-color-input-empty-grid: conic-gradient(
         var(--_rp-color-input-empty-tile) 25%,
         var(--_rp-color-input-empty-tile-alt) 0 50%,
@@ -33,13 +33,9 @@
 .rp-color-input--size-xl[data-v-fe0168d1] {
     --_rp-color-input-height: var(--rp-size-control-xl);
 }
-html.dark .rp-color-input[data-v-fe0168d1], [data-rp-color-scheme=dark] .rp-color-input[data-v-fe0168d1] {
-    --_rp-color-input-empty-tile: var(--rp-color-dark-6);
-    --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
-}
 .rp-color-input[data-v-fe0168d1] .rp-input {
     width: 100%;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
 .rp-color-input[data-v-fe0168d1] .rp-popover__content {

package/dist/color-picker.css

@@ -146,8 +146,8 @@
         0px,
         calc(var(--_rp-color-picker-saturation-height) - var(--_rp-color-picker-thumb-size))
     );
-    --_rp-color-picker-checkerboard-tile: var(--rp-color-gray-3);
-    --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-white);
+    --_rp-color-picker-checkerboard-tile: var(--rp-color-gray-5);
+    --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-gray-1);
     --_rp-color-picker-checkerboard: conic-gradient(
         var(--_rp-color-picker-checkerboard-tile) 25%,
         var(--_rp-color-picker-checkerboard-tile-alt) 0 50%,
@@ -168,10 +168,6 @@
     user-select: none;
     vertical-align: top;
 }
-html.dark .rp-color-picker[data-v-7fe38e4e], [data-rp-color-scheme=dark] .rp-color-picker[data-v-7fe38e4e] {
-    --_rp-color-picker-checkerboard-tile: var(--rp-color-dark-6);
-    --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-dark-4);
-}
 .rp-color-picker--readonly[data-v-7fe38e4e] {
     cursor: default;
 }

package/dist/color-swatch.css

@@ -2,8 +2,8 @@
 .rp-color-swatch[data-v-63bed4a0] {
     --_rp-color-swatch-size: 24px;
     --_rp-color-swatch-radius: var(--rp-radius-sm);
-    --_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-3);
-    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-white);
+    --_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-5);
+    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-gray-1);
     --_rp-color-swatch-checkerboard: conic-gradient(
         var(--_rp-color-swatch-checkerboard-tile) 25%,
         var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
@@ -31,10 +31,6 @@
     overflow: hidden;
     vertical-align: middle;
 }
-html.dark .rp-color-swatch[data-v-63bed4a0], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-63bed4a0] {
-    --_rp-color-swatch-checkerboard-tile: var(--rp-color-dark-6);
-    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-dark-4);
-}
 .rp-color-swatch__icon[data-v-63bed4a0] {
     display: inline-flex;
     align-items: center;

package/dist/combobox.css

@@ -13,7 +13,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     height: var(--_rp-combobox-height);
     padding: 0 var(--_rp-combobox-padding-x);
     gap: var(--rp-spacing-2);
@@ -95,7 +95,7 @@
 .rp-combobox--radius-xl[data-v-b9882cdc] {
     --_rp-combobox-radius: var(--rp-radius-xl);
 }
-html.dark .rp-combobox[data-v-b9882cdc], [data-rp-color-scheme=dark] .rp-combobox[data-v-b9882cdc] {
+[data-scheme=dark] .rp-combobox[data-v-b9882cdc] {
     --_rp-combobox-invalid-border: var(--rp-color-red-light-color);
     --_rp-combobox-invalid-ring: color-mix(
         in srgb,
@@ -194,13 +194,13 @@ html.dark .rp-combobox[data-v-b9882cdc], [data-rp-color-scheme=dark] .rp-combobo
 .rp-combobox__dropdown[data-v-b9882cdc] {
     position: absolute;
     width: calc(100% + var(--rp-border-width-thin) * 2);
-    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-combobox-radius);
     box-shadow: var(--rp-shadow-md);
     padding: var(--rp-spacing-1) 0;
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     padding: var(--rp-spacing-1);
 }
 .rp-combobox__dropdown[data-v-b9882cdc] .rp-scroll-area__viewport {
@@ -221,7 +221,7 @@ html.dark .rp-combobox[data-v-b9882cdc], [data-rp-color-scheme=dark] .rp-combobo
     background-color: var(--_rp-combobox-option-highlighted-bg);
 }
 .rp-combobox__option--selected[data-v-b9882cdc] {
-    color: var(--rp-primary-color-light-color);
+    color: var(--rp-color-primary-light-color);
 }
 .rp-combobox__option--disabled[data-v-b9882cdc] {
     color: var(--rp-color-disabled-color);