ropav 0.1.6 → 0.1.8

package/dist/color-picker2.js

@@ -7,14 +7,6 @@ var colorPickerParts = [
 	"swatches",
 	"swatch"
 ];
-var colorPickerFormats = [
-	"hex",
-	"hexa",
-	"rgb",
-	"rgba",
-	"hsl",
-	"hsla"
-];
 var colorPickerSizes = [
 	"xs",
 	"sm",
@@ -23,4 +15,4 @@ var colorPickerSizes = [
 	"xl"
 ];
 //#endregion
-export { colorPickerParts as n, colorPickerSizes as r, colorPickerFormats as t };
+export { colorPickerSizes as n, colorPickerParts as t };

package/dist/color-swatch.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-color-swatch[data-v-13032098] {
+.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);
@@ -31,11 +31,11 @@
     overflow: hidden;
     vertical-align: middle;
 }
-html.dark .rp-color-swatch[data-v-13032098], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-13032098] {
+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-13032098] {
+.rp-color-swatch__icon[data-v-63bed4a0] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -44,7 +44,7 @@ html.dark .rp-color-swatch[data-v-13032098], [data-rp-color-scheme=dark] .rp-col
     color: inherit;
     pointer-events: none;
 }
-.rp-color-swatch__icon[data-v-13032098] svg {
+.rp-color-swatch__icon[data-v-63bed4a0] svg {
     display: block;
     width: 100%;
     height: 100%;

package/dist/color-swatch.js

@@ -1,9 +1,10 @@
 import './color-swatch.css';
-import { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as parseCssColor } from "./color.js";
+import { t as toCssLength } from "./css.js";
 import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template } from "vue";
-//#region src/components/color-swatch/useColorSwatchColor.ts
+//#region src/components/color-swatch/colorSwatchColor.ts
 function getColorSwatchForeground(color) {
 	const background = parseCssColor(color);
 	if (!background) return "var(--rp-color-white)";
@@ -25,7 +26,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-13032098><span data-v-13032098 class=rp-color-swatch__icon aria-hidden=true>", 1);
+var t0 = template("<span data-v-63bed4a0><span data-v-63bed4a0 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({
@@ -53,7 +54,7 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"--_rp-color-swatch-overlay-stroke": overlay.stroke,
 				"--_rp-color-swatch-overlay-shadow": overlay.shadow
 			};
-			if (props.size !== void 0) style["--_rp-color-swatch-size"] = normalizeSize(props.size);
+			if (props.size !== void 0) style["--_rp-color-swatch-size"] = toCssLength(props.size);
 			return style;
 		});
 		const rootAttrs = computed(() => getRootAttrs({
@@ -62,9 +63,6 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			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, [rootAttrs.value]));
@@ -72,6 +70,6 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		createSlot("default", null, null, 1);
 		return n2;
 	}
-}), [["__scopeId", "data-v-13032098"]]);
+}), [["__scopeId", "data-v-63bed4a0"]]);
 //#endregion
 export { color_swatch_default as t };

package/dist/color.js

@@ -1,3 +1,4 @@
+import { i as roundTo, t as clamp } from "./number.js";
 //#region src/utils/color.ts
 var DEFAULT_OPACITY = 100;
 var NUMBER_SOURCE = String.raw`[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?`;
@@ -32,13 +33,13 @@ function parseHexColor(color) {
 		red: Number.parseInt(hex[0] + hex[0], 16),
 		green: Number.parseInt(hex[1] + hex[1], 16),
 		blue: Number.parseInt(hex[2] + hex[2], 16),
-		opacity: hex.length === 4 ? roundPercent(Number.parseInt(hex[3] + hex[3], 16) / 255 * 100) : DEFAULT_OPACITY
+		opacity: hex.length === 4 ? roundTo(Number.parseInt(hex[3] + hex[3], 16) / 255 * 100) : DEFAULT_OPACITY
 	};
 	return {
 		red: Number.parseInt(hex.slice(0, 2), 16),
 		green: Number.parseInt(hex.slice(2, 4), 16),
 		blue: Number.parseInt(hex.slice(4, 6), 16),
-		opacity: hex.length === 8 ? roundPercent(Number.parseInt(hex.slice(6, 8), 16) / 255 * 100) : DEFAULT_OPACITY
+		opacity: hex.length === 8 ? roundTo(Number.parseInt(hex.slice(6, 8), 16) / 255 * 100) : DEFAULT_OPACITY
 	};
 }
 function parseRgbColor(color) {
@@ -131,9 +132,9 @@ function parsePercentage(channel) {
 function parseAlpha(alpha) {
 	if (alpha === void 0) return DEFAULT_OPACITY;
 	const percentage = parsePercentage(alpha);
-	if (percentage != null) return roundPercent(percentage);
+	if (percentage != null) return roundTo(percentage);
 	const number = parseNumber(alpha);
-	return number == null ? void 0 : roundPercent(clamp(number, 0, 1) * 100);
+	return number == null ? void 0 : roundTo(clamp(number, 0, 1) * 100);
 }
 function parseNumber(value) {
 	const token = value.trim();
@@ -180,11 +181,5 @@ function hslToRgb(hue, saturation, lightness, opacity) {
 function normalizeHue(value) {
 	return (value % 360 + 360) % 360;
 }
-function roundPercent(value) {
-	return Math.round(value * 100) / 100;
-}
-function clamp(value, min, max) {
-	return Math.min(max, Math.max(min, value));
-}
 //#endregion
 export { parseCssColor as t };

package/dist/combobox.css

@@ -0,0 +1,251 @@
+@layer ropav.components {
+.rp-combobox[data-v-b9882cdc] {
+    --_rp-combobox-height: var(--rp-size-control-md);
+    --_rp-combobox-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-combobox-font-size: var(--rp-font-size-md);
+    --_rp-combobox-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+    --_rp-combobox-option-padding-y: var(--rp-spacing-1);
+    --_rp-combobox-radius: var(--rp-radius-sm);
+    --_rp-combobox-invalid-border: var(--rp-color-red-filled);
+    --_rp-combobox-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
+    --_rp-combobox-option-highlighted-bg: var(--rp-color-default-hover);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-width: 180px;
+    height: var(--_rp-combobox-height);
+    padding: 0 var(--_rp-combobox-padding-x);
+    gap: var(--rp-spacing-2);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-combobox-font-size);
+    font-weight: var(--rp-font-weight-normal);
+    line-height: 1;
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    border-radius: var(--_rp-combobox-radius);
+    cursor: text;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-combobox[data-v-b9882cdc]:hover:not(.rp-combobox--disabled):not(.rp-combobox--invalid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-combobox[data-v-b9882cdc]:focus-within:not(.rp-combobox--disabled):not(.rp-combobox--invalid), .rp-combobox--open[data-v-b9882cdc]:not(.rp-combobox--disabled):not(.rp-combobox--invalid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-combobox__native[data-v-b9882cdc] {
+    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-combobox--size-xs[data-v-b9882cdc] {
+    --_rp-combobox-height: var(--rp-size-control-xs);
+    --_rp-combobox-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-combobox-font-size: var(--rp-font-size-xs);
+    --_rp-combobox-option-min-height: calc(var(--rp-size-control-xs) - var(--rp-spacing-2));
+    --_rp-combobox-option-padding-y: calc(var(--rp-spacing-1) / 2);
+}
+.rp-combobox--size-sm[data-v-b9882cdc] {
+    --_rp-combobox-height: var(--rp-size-control-sm);
+    --_rp-combobox-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-combobox-font-size: var(--rp-font-size-sm);
+    --_rp-combobox-option-min-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-3));
+    --_rp-combobox-option-padding-y: var(--rp-spacing-1);
+}
+.rp-combobox--size-md[data-v-b9882cdc] {
+    --_rp-combobox-height: var(--rp-size-control-md);
+    --_rp-combobox-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-combobox-font-size: var(--rp-font-size-md);
+    --_rp-combobox-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+    --_rp-combobox-option-padding-y: var(--rp-spacing-1);
+}
+.rp-combobox--size-lg[data-v-b9882cdc] {
+    --_rp-combobox-height: var(--rp-size-control-lg);
+    --_rp-combobox-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-combobox-font-size: var(--rp-font-size-lg);
+    --_rp-combobox-option-min-height: calc(var(--rp-size-control-lg) - var(--rp-spacing-5));
+    --_rp-combobox-option-padding-y: calc(var(--rp-spacing-3) / 2);
+}
+.rp-combobox--size-xl[data-v-b9882cdc] {
+    --_rp-combobox-height: var(--rp-size-control-xl);
+    --_rp-combobox-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-combobox-font-size: var(--rp-font-size-xl);
+    --_rp-combobox-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
+    --_rp-combobox-option-padding-y: var(--rp-spacing-2);
+}
+.rp-combobox--radius-xs[data-v-b9882cdc] {
+    --_rp-combobox-radius: var(--rp-radius-xs);
+}
+.rp-combobox--radius-sm[data-v-b9882cdc] {
+    --_rp-combobox-radius: var(--rp-radius-sm);
+}
+.rp-combobox--radius-md[data-v-b9882cdc] {
+    --_rp-combobox-radius: var(--rp-radius-md);
+}
+.rp-combobox--radius-lg[data-v-b9882cdc] {
+    --_rp-combobox-radius: var(--rp-radius-lg);
+}
+.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] {
+    --_rp-combobox-invalid-border: var(--rp-color-red-light-color);
+    --_rp-combobox-invalid-ring: color-mix(
+        in srgb,
+        var(--rp-color-red-light-color) 32%,
+        transparent
+    );
+}
+.rp-combobox--disabled[data-v-b9882cdc] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-combobox--invalid[data-v-b9882cdc] {
+    border-color: var(--_rp-combobox-invalid-border);
+}
+.rp-combobox--invalid[data-v-b9882cdc]:focus-within, .rp-combobox--open.rp-combobox--invalid[data-v-b9882cdc] {
+    border-color: var(--_rp-combobox-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-combobox-invalid-ring);
+}
+.rp-combobox__input[data-v-b9882cdc] {
+    box-sizing: border-box;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: var(--rp-color-control-fg);
+    line-height: 1;
+}
+.rp-combobox__input[data-v-b9882cdc]::placeholder {
+    color: var(--rp-color-control-placeholder);
+}
+.rp-combobox__input[data-v-b9882cdc]:disabled {
+    cursor: not-allowed;
+}
+.rp-combobox__indicator[data-v-b9882cdc] {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-combobox__indicator svg[data-v-b9882cdc] {
+    width: 100%;
+    height: 100%;
+}
+.rp-combobox__indicator[data-v-b9882cdc] {
+    position: relative;
+    color: var(--rp-color-control-icon);
+    transform: translateX(var(--rp-spacing-1));
+}
+.rp-combobox__toggle[data-v-b9882cdc], .rp-combobox__clear[data-v-b9882cdc] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-combobox__toggle svg[data-v-b9882cdc], .rp-combobox__clear svg[data-v-b9882cdc] {
+    width: 100%;
+    height: 100%;
+}
+.rp-combobox__toggle[data-v-b9882cdc], .rp-combobox__clear[data-v-b9882cdc] {
+    color: var(--rp-color-control-icon);
+    transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-combobox__toggle[data-v-b9882cdc]:hover, .rp-combobox__clear[data-v-b9882cdc]:hover {
+    color: var(--rp-color-control-fg);
+}
+.rp-combobox__toggle[data-v-b9882cdc]:disabled {
+    cursor: not-allowed;
+}
+.rp-combobox__clear[data-v-b9882cdc] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background-color: var(--rp-color-control-bg);
+    opacity: 0;
+    pointer-events: none;
+}
+.rp-combobox:hover .rp-combobox__clear[data-v-b9882cdc] {
+    opacity: 1;
+    pointer-events: auto;
+}
+.rp-combobox:hover .rp-combobox__clear + .rp-combobox__toggle[data-v-b9882cdc] {
+    opacity: 0;
+}
+.rp-combobox__dropdown[data-v-b9882cdc] {
+    position: absolute;
+    width: calc(100% + var(--rp-border-width-thin) * 2);
+    z-index: 100;
+    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;
+    padding: var(--rp-spacing-1);
+}
+.rp-combobox__dropdown[data-v-b9882cdc] .rp-scroll-area__viewport {
+    scroll-padding-block: var(--rp-spacing-1);
+}
+.rp-combobox__option[data-v-b9882cdc] {
+    display: flex;
+    align-items: center;
+    min-height: var(--_rp-combobox-option-min-height);
+    padding: var(--_rp-combobox-option-padding-y) var(--_rp-combobox-padding-x);
+    border-radius: var(--_rp-combobox-radius);
+    font-size: var(--_rp-combobox-font-size);
+    cursor: pointer;
+    color: var(--rp-color-control-fg);
+    transition: color var(--rp-transition-fast);
+}
+.rp-combobox__option--highlighted[data-v-b9882cdc] {
+    background-color: var(--_rp-combobox-option-highlighted-bg);
+}
+.rp-combobox__option--selected[data-v-b9882cdc] {
+    color: var(--rp-primary-color-light-color);
+}
+.rp-combobox__option--disabled[data-v-b9882cdc] {
+    color: var(--rp-color-disabled-color);
+    cursor: not-allowed;
+}
+.rp-combobox__empty[data-v-b9882cdc] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--rp-spacing-4);
+    color: var(--rp-color-dimmed);
+    font-size: var(--_rp-combobox-font-size);
+}
+.rp-combobox-dropdown-enter-active[data-v-b9882cdc],
+  .rp-combobox-dropdown-leave-active[data-v-b9882cdc] {
+    transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
+}
+.rp-combobox-dropdown-enter-from[data-v-b9882cdc],
+  .rp-combobox-dropdown-leave-to[data-v-b9882cdc] {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--rp-spacing-1)));
+}
+.rp-combobox__dropdown[data-side=top].rp-combobox-dropdown-enter-from[data-v-b9882cdc],
+  .rp-combobox__dropdown[data-side=top].rp-combobox-dropdown-leave-to[data-v-b9882cdc] {
+    transform: translateY(var(--rp-spacing-1));
+}
+}