ropav 0.0.10 → 0.0.11

package/dist/color-picker.js

@@ -1,10 +1,11 @@
 import './color-picker.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as parseCssColor } from "./color.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as check_default } from "./check.js";
 import { t as color_swatch_default } from "./color-swatch.js";
-import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setValue, template, unref, useAttrs } from "vue";
+import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, nthChild, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setValue, template, unref } from "vue";
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
@@ -260,7 +261,7 @@ function useColorPickerDrag({ target, focusTarget, readonly, isGeometryValid, up
 }
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<div data-v-ae77cf79 class=rp-color-picker__saturation role=group><input data-v-ae77cf79 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--saturation\"type=range min=0 max=100 step=1 aria-label=Saturation aria-orientation=horizontal><input data-v-ae77cf79 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--value\"type=range min=0 max=100 step=1 aria-label=Value aria-orientation=vertical><span data-v-ae77cf79 class=rp-color-picker__surface aria-hidden=true></span><span data-v-ae77cf79 class=rp-color-picker__handle aria-hidden=true>", 1);
+var t0$2 = template("<div data-v-fbb051b0 role=group data-control=saturation><input data-v-fbb051b0 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--saturation\"type=range min=0 max=100 step=1 aria-label=Saturation aria-orientation=horizontal><input data-v-fbb051b0 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--value\"type=range min=0 max=100 step=1 aria-label=Value aria-orientation=vertical><span data-v-fbb051b0 class=rp-color-picker__surface aria-hidden=true></span><span data-v-fbb051b0 data-control=saturation aria-hidden=true>", 1);
 delegateEvents("input", "keydown", "pointerdown");
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue
@@ -277,7 +278,35 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		handleClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		handleStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -355,47 +384,52 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			else updateValue(saturation.value, nextValue);
 		}
 		const _setTemplateRef = createTemplateRefSetter();
-		const n2 = t0$2();
-		const n0 = child(n2);
+		const n3 = t0$2();
+		const n0 = child(n3);
 		const n1 = next(n0, 1);
+		const n2 = nthChild(n3, 3);
 		n0.$evtinput = createInvoker(($event) => onAxisInput($event, "saturation"));
 		n0.$evtkeydown = createInvoker(($event) => onAxisKeydown($event, "saturation"));
 		_setTemplateRef(n0, saturationInputRef, null, "saturationInputRef");
 		n1.$evtinput = createInvoker(($event) => onAxisInput($event, "value"));
 		n1.$evtkeydown = createInvoker(($event) => onAxisKeydown($event, "value"));
-		n2.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
-		_setTemplateRef(n2, saturationRef, null, "saturationRef");
+		n3.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
+		_setTemplateRef(n3, saturationRef, null, "saturationRef");
 		renderEffect(() => {
 			const _describedby = __props.describedby;
+			const _readonly = __props.readonly;
 			const _id = __props.id;
 			const _saturation = saturation.value;
 			const _ariaValueText = ariaValueText.value;
 			const _value = value.value;
-			setStyle(n2, saturationStyle.value);
-			setAttr(n2, "aria-label", groupAriaLabel.value);
-			setAttr(n2, "aria-labelledby", __props.labelledby);
-			setAttr(n2, "aria-describedby", _describedby);
-			setAttr(n2, "aria-readonly", __props.readonly || void 0);
-			setAttr(n2, "data-readonly", __props.readonly || void 0);
+			setClass(n3, ["rp-color-picker__saturation", __props.controlClass]);
+			setStyle(n3, [saturationStyle.value, __props.controlStyle]);
+			setAttr(n3, "aria-label", groupAriaLabel.value);
+			setAttr(n3, "aria-labelledby", __props.labelledby);
+			setAttr(n3, "aria-describedby", _describedby);
+			setAttr(n3, "aria-readonly", _readonly || void 0);
+			setAttr(n3, "data-readonly", unref(presence)(_readonly));
 			setProp(n0, "id", _id);
 			setValue(n0, _saturation);
 			setAttr(n0, "aria-valuenow", Math.round(_saturation));
 			setAttr(n0, "aria-valuetext", _ariaValueText);
 			setAttr(n0, "aria-describedby", _describedby);
-			setAttr(n0, "aria-readonly", __props.readonly || void 0);
+			setAttr(n0, "aria-readonly", _readonly || void 0);
 			setProp(n1, "id", _id ? `${_id}-value` : void 0);
 			setValue(n1, _value);
 			setAttr(n1, "aria-valuenow", Math.round(_value));
 			setAttr(n1, "aria-valuetext", _ariaValueText);
 			setAttr(n1, "aria-describedby", _describedby);
-			setAttr(n1, "aria-readonly", __props.readonly || void 0);
+			setAttr(n1, "aria-readonly", _readonly || void 0);
+			setClass(n2, ["rp-color-picker__handle", __props.handleClass]);
+			setStyle(n2, __props.handleStyle);
 		});
-		return n2;
+		return n3;
 	}
-}), [["__scopeId", "data-v-ae77cf79"]]);
+}), [["__scopeId", "data-v-fbb051b0"]]);
 //#endregion
 //#region src/components/color-picker/color-picker-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<div data-v-2de2d9f2 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-2de2d9f2 aria-hidden=true></span><span data-v-2de2d9f2 aria-hidden=true>", 1);
+var t0$1 = template("<div data-v-0299a505 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-0299a505 aria-hidden=true></span><span data-v-0299a505 aria-hidden=true>", 1);
 delegateEvents("pointerdown", "keydown");
 //#endregion
 //#region src/components/color-picker/color-picker-slider.vue
@@ -409,7 +443,35 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		readonly: {
 			type: Boolean,
 			default: false
-		}
+		},
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		handleClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		handleStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: ["update:value"],
 	setup(__props, { emit: __emit }) {
@@ -420,7 +482,7 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		const max = computed(() => isHue.value ? 359 : 100);
 		const rootClass = computed(() => `rp-color-picker__${props.variant}`);
 		const surfaceClass = computed(() => ["rp-color-picker__slider-surface", `rp-color-picker__${props.variant}-surface`]);
-		const handleClass = computed(() => ["rp-color-picker__slider-handle", `rp-color-picker__${props.variant}-handle`]);
+		const internalHandleClass = computed(() => ["rp-color-picker__slider-handle", `rp-color-picker__${props.variant}-handle`]);
 		const normalizedValue = computed(() => isHue.value ? normalizeHue(props.value) : clampOpacity(props.value));
 		const currentOutputValue = computed(() => normalizeOutputValue(normalizedValue.value));
 		const sliderStyle = computed(() => {
@@ -482,20 +544,25 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		n2.$evtkeydown = createInvoker(onKeydown);
 		_setTemplateRef(n2, sliderRef, null, "sliderRef");
 		renderEffect(() => {
-			setClass(n2, rootClass.value);
-			setStyle(n2, sliderStyle.value);
+			const _readonly = __props.readonly;
+			const _variant = __props.variant;
+			setClass(n2, [rootClass.value, __props.controlClass]);
+			setStyle(n2, [sliderStyle.value, __props.controlStyle]);
 			setAttr(n2, "aria-label", ariaLabel.value);
 			setAttr(n2, "aria-valuemax", max.value);
 			setAttr(n2, "aria-valuenow", Math.round(normalizedValue.value));
 			setAttr(n2, "aria-valuetext", ariaValueText.value);
-			setAttr(n2, "aria-readonly", __props.readonly || void 0);
-			setAttr(n2, "data-readonly", __props.readonly || void 0);
+			setAttr(n2, "aria-readonly", _readonly || void 0);
+			setAttr(n2, "data-readonly", unref(presence)(_readonly));
+			setAttr(n2, "data-control", _variant);
 			setClass(n0, surfaceClass.value);
-			setClass(n1, handleClass.value);
+			setClass(n1, [internalHandleClass.value, __props.handleClass]);
+			setStyle(n1, __props.handleStyle);
+			setAttr(n1, "data-control", _variant);
 		});
 		return n2;
 	}
-}), [["__scopeId", "data-v-2de2d9f2"]]);
+}), [["__scopeId", "data-v-0299a505"]]);
 //#endregion
 //#region src/components/color-picker/useColorPickerSwatches.ts
 var MAX_SWATCHES_PER_ROW = 15;
@@ -654,10 +721,10 @@ function getComparableColor(color) {
 }
 //#endregion
 //#region src/components/color-picker/color-picker.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-38eeea2b class=rp-color-picker__header><span data-v-38eeea2b class=rp-color-picker__label>");
-var t1 = template("<button data-v-38eeea2b class=rp-color-picker__swatch type=button role=radio>");
-var t2 = template("<div data-v-38eeea2b class=rp-color-picker__swatches role=radiogroup>");
-var t3 = template("<div data-v-38eeea2b>", 1);
+var t0 = template("<div data-v-41c4ca07 class=rp-color-picker__header><span data-v-41c4ca07>");
+var t1 = template("<button data-v-41c4ca07>");
+var t2 = template("<div data-v-41c4ca07>");
+var t3 = template("<div data-v-41c4ca07>", 1);
 delegateEvents("click", "keydown", "focusout");
 //#endregion
 //#region src/components/color-picker/color-picker.vue
@@ -682,7 +749,9 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		swatchesPerRow: {},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit, slots: $slots }) {
@@ -692,11 +761,11 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			[`size-${props.size}`]: Boolean(props.size),
 			readonly: props.readonly
 		}));
-		const attrs = useAttrs();
-		const rootAttrs = computed(() => {
-			const { disabled: _disabled, invalid: _invalid, required: _required, ...filteredAttrs } = attrs;
-			return filteredAttrs;
-		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-readonly": presence(props.readonly)
+		}));
 		const { selectedColor, saturationValue, opacityColor, showAlphaControls, updateSelection, updateHue, updateOpacity, selectColor, isColorSelected } = useColorPickerValue(props, (value) => emit("update:modelValue", value));
 		const { swatchesRef, normalizedSwatchesPerRow, validSwatches, swatchesStyle, swatchSize, isSwatchSelected, getSwatchTabindex, selectSwatch, onSwatchFocus, onSwatchesFocusout, onSwatchKeydown } = useColorPickerSwatches(props, {
 			isSelected: isColorSelected,
@@ -704,14 +773,13 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		const _setTemplateRef = createTemplateRefSetter();
 		const n22 = t3();
-		renderEffect(() => setDynamicProps(n22, [rootAttrs.value, {
-			class: rootClass.value,
-			"data-readonly": __props.readonly || void 0
-		}]));
+		renderEffect(() => setDynamicProps(n22, [rootAttrs.value]));
 		setInsertionState(n22, null, 0);
 		createIf(() => $slots.default, () => {
 			const n4 = t0();
-			setInsertionState(child(n4), null, 0);
+			const n3 = child(n4);
+			renderEffect(() => setDynamicProps(n3, [unref(getPartAttrs)("label", { class: "rp-color-picker__label" })]));
+			setInsertionState(n3, null, 0);
 			createSlot("default", null, null, 1);
 			return n4;
 		});
@@ -726,12 +794,20 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					"aria-label": () => __props.ariaLabel,
 					describedby: () => __props.describedby,
 					labelledby: () => __props.labelledby,
+					"control-class": () => __props.classNames?.control,
+					"control-style": () => __props.styles?.control,
+					"handle-class": () => __props.classNames?.handle,
+					"handle-style": () => __props.styles?.handle,
 					"onUpdate:modelValue": () => unref(updateSelection)
 				}),
 				createComponent(color_picker_slider_default, {
 					variant: "hue",
 					value: () => unref(selectedColor).hue,
 					readonly: () => __props.readonly,
+					"control-class": () => __props.classNames?.control,
+					"control-style": () => __props.styles?.control,
+					"handle-class": () => __props.classNames?.handle,
+					"handle-style": () => __props.styles?.handle,
 					"onUpdate:value": () => unref(updateHue)
 				}),
 				createIf(() => unref(showAlphaControls), () => {
@@ -740,6 +816,10 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 						color: () => unref(opacityColor),
 						value: () => unref(selectedColor).opacity,
 						readonly: () => __props.readonly,
+						"control-class": () => __props.classNames?.control,
+						"control-style": () => __props.styles?.control,
+						"handle-class": () => __props.classNames?.handle,
+						"handle-style": () => __props.styles?.handle,
 						"onUpdate:value": () => unref(updateOpacity)
 					});
 				})
@@ -750,13 +830,18 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			const n21 = t2();
 			renderEffect(() => {
 				const _withPicker = __props.withPicker;
-				setStyle(n21, unref(swatchesStyle));
-				setAttr(n21, "data-fill", unref(normalizedSwatchesPerRow) ? true : void 0);
-				setAttr(n21, "data-with-picker", _withPicker || void 0);
-				setProp(n21, "id", _withPicker ? void 0 : __props.id);
-				setAttr(n21, "aria-label", _withPicker ? "Color swatches" : __props.ariaLabel || "Color swatches");
-				setAttr(n21, "aria-describedby", _withPicker ? void 0 : __props.describedby);
-				setAttr(n21, "aria-labelledby", _withPicker ? void 0 : __props.labelledby);
+				setDynamicProps(n21, [unref(getPartAttrs)("swatches", {
+					class: "rp-color-picker__swatches",
+					style: unref(swatchesStyle)
+				}), {
+					"data-fill": unref(normalizedSwatchesPerRow) ? true : void 0,
+					"data-with-picker": _withPicker || void 0,
+					id: _withPicker ? void 0 : __props.id,
+					role: "radiogroup",
+					"aria-label": _withPicker ? "Color swatches" : __props.ariaLabel || "Color swatches",
+					"aria-describedby": _withPicker ? void 0 : __props.describedby,
+					"aria-labelledby": _withPicker ? void 0 : __props.labelledby
+				}]);
 			});
 			setInsertionState(n21, null, 0);
 			createFor(() => unref(validSwatches), (_for_item0, _for_key0) => {
@@ -764,12 +849,20 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				renderEffect(() => {
 					const _readonly = __props.readonly;
 					const _index = _for_key0.value;
+					const _isSwatchSelected = unref(isSwatchSelected);
 					const _swatch = _for_item0.value;
-					setProp(n20, "disabled", _readonly);
-					setProp(n20, "tabindex", _readonly ? -1 : unref(getSwatchTabindex)(_index));
-					setAttr(n20, "aria-checked", unref(isSwatchSelected)(_index));
-					setAttr(n20, "aria-label", `Select color ${_swatch}`);
-					setProp(n20, "title", _swatch);
+					const _presence = unref(presence);
+					setDynamicProps(n20, [unref(getPartAttrs)("swatch", { class: "rp-color-picker__swatch" }), {
+						type: "button",
+						role: "radio",
+						disabled: _readonly,
+						tabindex: _readonly ? -1 : unref(getSwatchTabindex)(_index),
+						"aria-checked": _isSwatchSelected(_index),
+						"aria-label": `Select color ${_swatch}`,
+						title: _swatch,
+						"data-selected": _presence(_isSwatchSelected(_index)),
+						"data-readonly": _presence(_readonly)
+					}]);
 				});
 				setInsertionState(n20, null, 0);
 				createComponent(color_swatch_default, {
@@ -792,6 +885,6 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		return n22;
 	}
-}), [["__scopeId", "data-v-38eeea2b"]]);
+}), [["__scopeId", "data-v-41c4ca07"]]);
 //#endregion
 export { formatColorPickerValue as n, parseColorPickerValue as r, color_picker_default as t };

package/dist/color-picker2.js

@@ -1,4 +1,12 @@
 //#region src/components/color-picker/types.ts
+var colorPickerParts = [
+	"root",
+	"label",
+	"control",
+	"handle",
+	"swatches",
+	"swatch"
+];
 var colorPickerFormats = [
 	"hex",
 	"hexa",
@@ -15,4 +23,4 @@ var colorPickerSizes = [
 	"xl"
 ];
 //#endregion
-export { colorPickerSizes as n, colorPickerFormats as t };
+export { colorPickerParts as n, colorPickerSizes as r, colorPickerFormats as t };

package/dist/color-swatch.css

@@ -1,50 +1,52 @@
-.rp-color-swatch[data-v-b0899989] {
-  --_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: conic-gradient(
-      var(--_rp-color-swatch-checkerboard-tile) 25%,
-      var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
-      var(--_rp-color-swatch-checkerboard-tile) 0 75%,
-      var(--_rp-color-swatch-checkerboard-tile-alt) 0
-  );
-  --_rp-color-swatch-checkerboard-size: calc(var(--_rp-color-swatch-size) / 2)
-      calc(var(--_rp-color-swatch-size) / 2);
-  --_rp-color-swatch-overlay-stroke: rgb(0 0 0 / 10%);
-  --_rp-color-swatch-overlay-shadow: rgb(0 0 0 / 15%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: var(--_rp-color-swatch-size);
-  height: var(--_rp-color-swatch-size);
-  flex-shrink: 0;
-  background: linear-gradient(var(--_rp-color-swatch-color), var(--_rp-color-swatch-color)), var(--_rp-color-swatch-checkerboard);
-  background-size: auto, var(--_rp-color-swatch-checkerboard-size);
-  border: 0;
-  border-radius: var(--_rp-color-swatch-radius);
-  box-shadow: var(--_rp-color-swatch-overlay-stroke) 0 0 0 0.0625rem inset, var(--_rp-color-swatch-overlay-shadow) 0 0 0.25rem inset;
-  color: var(--_rp-color-swatch-fg);
-  line-height: 1;
-  overflow: hidden;
-  vertical-align: middle;
+@layer ropav.components {
+.rp-color-swatch[data-v-13032098] {
+    --_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: conic-gradient(
+        var(--_rp-color-swatch-checkerboard-tile) 25%,
+        var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
+        var(--_rp-color-swatch-checkerboard-tile) 0 75%,
+        var(--_rp-color-swatch-checkerboard-tile-alt) 0
+    );
+    --_rp-color-swatch-checkerboard-size: calc(var(--_rp-color-swatch-size) / 2)
+        calc(var(--_rp-color-swatch-size) / 2);
+    --_rp-color-swatch-overlay-stroke: rgb(0 0 0 / 10%);
+    --_rp-color-swatch-overlay-shadow: rgb(0 0 0 / 15%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--_rp-color-swatch-size);
+    height: var(--_rp-color-swatch-size);
+    flex-shrink: 0;
+    background: linear-gradient(var(--_rp-color-swatch-color), var(--_rp-color-swatch-color)), var(--_rp-color-swatch-checkerboard);
+    background-size: auto, var(--_rp-color-swatch-checkerboard-size);
+    border: 0;
+    border-radius: var(--_rp-color-swatch-radius);
+    box-shadow: var(--_rp-color-swatch-overlay-stroke) 0 0 0 0.0625rem inset, var(--_rp-color-swatch-overlay-shadow) 0 0 0.25rem inset;
+    color: var(--_rp-color-swatch-fg);
+    line-height: 1;
+    overflow: hidden;
+    vertical-align: middle;
 }
-html.dark .rp-color-swatch[data-v-b0899989], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-b0899989] {
-  --_rp-color-swatch-checkerboard-tile: var(--rp-color-dark-6);
-  --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-dark-4);
+html.dark .rp-color-swatch[data-v-13032098], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-13032098] {
+    --_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-b0899989] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 70%;
-  height: 70%;
-  color: inherit;
-  pointer-events: none;
+.rp-color-swatch__icon[data-v-13032098] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 70%;
+    height: 70%;
+    color: inherit;
+    pointer-events: none;
+}
+.rp-color-swatch__icon[data-v-13032098] svg {
+    display: block;
+    width: 100%;
+    height: 100%;
 }
-.rp-color-swatch__icon[data-v-b0899989] svg {
-  display: block;
-  width: 100%;
-  height: 100%;
 }

package/dist/color-swatch.js

@@ -1,7 +1,8 @@
 import './color-swatch.css';
+import { n as useStylesApi } from "./styles-api.js";
 import { t as parseCssColor } from "./color.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref, useAttrs } from "vue";
+import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template } from "vue";
 //#region src/components/color-swatch/useColorSwatchColor.ts
 function getColorSwatchForeground(color) {
 	const background = parseCssColor(color);
@@ -24,7 +25,7 @@ function getPerceivedBrightness({ red, green, blue }) {
 }
 //#endregion
 //#region src/components/color-swatch/color-swatch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-b0899989><span data-v-b0899989 class=rp-color-swatch__icon aria-hidden=true>", 1);
+var t0 = template("<span data-v-13032098><span data-v-13032098 class=rp-color-swatch__icon aria-hidden=true>", 1);
 //#endregion
 //#region src/components/color-swatch/color-swatch.vue
 var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -34,11 +35,13 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	props: {
 		color: {},
 		size: {},
-		ariaLabel: {}
+		ariaLabel: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
 		const props = __props;
-		const attrs = useAttrs();
+		const { attrs, getRootAttrs } = useStylesApi(props, "root");
 		const isHidden = computed(() => attrs["aria-hidden"] === true || attrs["aria-hidden"] === "true");
 		const rootRole = computed(() => isHidden.value ? void 0 : "img");
 		const rootAriaLabel = computed(() => isHidden.value ? void 0 : props.ariaLabel || `Color swatch ${props.color}`);
@@ -53,21 +56,22 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			if (props.size !== void 0) style["--_rp-color-swatch-size"] = normalizeSize(props.size);
 			return style;
 		});
+		const rootAttrs = computed(() => getRootAttrs({
+			class: "rp-color-swatch",
+			style: rootStyle.value,
+			role: rootRole.value,
+			"aria-label": rootAriaLabel.value
+		}));
 		function normalizeSize(size) {
 			return typeof size === "number" ? `${size}px` : size;
 		}
 		const n2 = t0();
 		const n1 = child(n2);
-		renderEffect(() => setDynamicProps(n2, [unref(attrs), {
-			class: "rp-color-swatch",
-			style: rootStyle.value,
-			role: rootRole.value,
-			"aria-label": rootAriaLabel.value
-		}]));
+		renderEffect(() => setDynamicProps(n2, [rootAttrs.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("default", null, null, 1);
 		return n2;
 	}
-}), [["__scopeId", "data-v-b0899989"]]);
+}), [["__scopeId", "data-v-13032098"]]);
 //#endregion
 export { color_swatch_default as t };

package/dist/color-swatch2.js

@@ -0,0 +1,4 @@
+//#region src/components/color-swatch/types.ts
+var colorSwatchParts = ["root"];
+//#endregion
+export { colorSwatchParts as t };

package/dist/components/accordion/accordion-item.d.ts

@@ -7,7 +7,19 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     attrs: any;
     slots: {
         trigger?: (props: {
-            triggerProps: import('./types.js').AccordionTriggerProps;
+            triggerProps: {
+                'data-state': import('./types.js').AccordionState;
+                'data-disabled': "" | undefined;
+                class: import('vue').HTMLAttributes["class"];
+                style?: import('vue').HTMLAttributes["style"];
+                id: string;
+                'aria-disabled'?: boolean;
+                type: "button";
+                disabled?: boolean;
+                'aria-controls': string;
+                'aria-expanded': boolean;
+                onClick: (event: MouseEvent) => void;
+            };
             value: import('./types.js').AccordionItemValue;
             isOpen: boolean;
             disabled: boolean;

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

@@ -1,4 +1,5 @@
 export { default as Accordion } from './accordion.js';
 export { default as AccordionItem } from './accordion-item.js';
 export { useAccordion, useAccordionItem } from './useAccordion.js';
-export type { AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionOrientation, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types.js';
+export { accordionItemParts, accordionParts } from './types.js';
+export type { AccordionItemPart, AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionOrientation, AccordionPart, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types.js';

package/dist/components/accordion/index.js

@@ -1,2 +1,2 @@
-import { i as useAccordionItem, n as accordion_default, r as useAccordion, t as accordion_item_default } from "../../accordion.js";
-export { accordion_default as Accordion, accordion_item_default as AccordionItem, useAccordion, useAccordionItem };
+import { a as accordionItemParts, i as useAccordionItem, n as accordion_default, o as accordionParts, r as useAccordion, t as accordion_item_default } from "../../accordion.js";
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, accordionItemParts, accordionParts, useAccordion, useAccordionItem };

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

@@ -1,10 +1,15 @@
-import { ComputedRef, InjectionKey } from 'vue';
+import { ComputedRef, HTMLAttributes, InjectionKey } from 'vue';
+import { StylesApiProps } from '../../styles-api.js';
 import { CollapseContentProps, CollapseContentRole, CollapseTriggerProps } from '../collapse/types.js';
 export type AccordionItemValue = string | number;
 export type AccordionModelValue = AccordionItemValue | AccordionItemValue[] | null;
 export type AccordionOrientation = 'vertical' | 'horizontal';
 export type AccordionState = 'open' | 'closed';
-export interface AccordionProps {
+export declare const accordionParts: readonly ["root"];
+export declare const accordionItemParts: readonly ["root", "trigger", "title", "icon", "content"];
+export type AccordionPart = (typeof accordionParts)[number];
+export type AccordionItemPart = (typeof accordionItemParts)[number];
+export interface AccordionProps extends StylesApiProps<AccordionPart> {
     id?: string;
     modelValue?: AccordionModelValue;
     defaultValue?: AccordionModelValue;
@@ -17,7 +22,7 @@ export interface AccordionProps {
     describedby?: string;
     labelledby?: string;
 }
-export interface AccordionItemProps {
+export interface AccordionItemProps extends StylesApiProps<AccordionItemPart> {
     id?: string;
     value: AccordionItemValue;
     title?: string;
@@ -46,7 +51,7 @@ export interface AccordionItemRootProps {
 }
 export interface AccordionTriggerProps extends CollapseTriggerProps {
     id: string;
-    class: string;
+    class: HTMLAttributes['class'];
     'aria-disabled'?: boolean;
 }
 export interface AccordionContentProps extends CollapseContentProps {

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

@@ -1,8 +1,8 @@
 import { AlertProps } 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<AlertProps & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onClose?: (() => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -17,7 +17,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } & {
         action?: (props: {}) => any;
     };
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "close") => void);
+    emit: ((evt: "close") => void) & ((evt: "update:open", value: boolean) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -1,3 +1,3 @@
 export { default as Alert } from './alert.js';
-export { alertColors, alertRadiuses, alertVariants } from './types.js';
-export type { AlertColor, AlertProps, AlertRadius, AlertRole, AlertVariant } from './types.js';
+export { alertColors, alertParts, alertRadiuses, alertVariants } from './types.js';
+export type { AlertColor, AlertPart, AlertProps, AlertRadius, AlertRole, AlertVariant, } from './types.js';