ropav 0.0.7 → 0.0.9

package/dist/select.css

@@ -1,33 +1,77 @@
-.rp-select[data-v-9838513c] {
+.rp-select[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-md);
+  --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-select-font-size: var(--rp-font-size-md);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+  --_rp-select-option-padding-y: var(--rp-spacing-1);
   --_rp-select-radius: var(--rp-radius-sm);
-  --_rp-select-invalid-border: var(--rp-color-danger);
-  --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
-  --_rp-select-option-focused-bg: var(--rp-color-surface-hover);
+  --_rp-select-invalid-border: var(--rp-color-red-filled);
+  --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
+  --_rp-select-option-focused-bg: var(--rp-color-default-hover);
   position: relative;
   display: inline-flex;
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-normal);
-  line-height: var(--rp-line-height-none);
-}
-html.dark .rp-select[data-v-9838513c] {
-  --_rp-select-invalid-border: var(--rp-color-danger-fg);
-  --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
-  --_rp-select-option-focused-bg: var(--rp-color-button-default-bg-active);
-}
-.rp-select--disabled[data-v-9838513c] {
+  line-height: 1;
+}
+.rp-select--size-xs[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-xs);
+  --_rp-select-padding-x: calc(var(--rp-size-control-xs) / 3);
+  --_rp-select-font-size: var(--rp-font-size-xs);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-xs) - var(--rp-spacing-2));
+  --_rp-select-option-padding-y: calc(var(--rp-spacing-1) / 2);
+}
+.rp-select--size-sm[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-sm);
+  --_rp-select-padding-x: calc(var(--rp-size-control-sm) / 3);
+  --_rp-select-font-size: var(--rp-font-size-sm);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-3));
+  --_rp-select-option-padding-y: var(--rp-spacing-1);
+}
+.rp-select--size-md[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-md);
+  --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-select-font-size: var(--rp-font-size-md);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+  --_rp-select-option-padding-y: var(--rp-spacing-1);
+}
+.rp-select--size-lg[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-lg);
+  --_rp-select-padding-x: calc(var(--rp-size-control-lg) / 3);
+  --_rp-select-font-size: var(--rp-font-size-lg);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-lg) - var(--rp-spacing-5));
+  --_rp-select-option-padding-y: calc(var(--rp-spacing-3) / 2);
+}
+.rp-select--size-xl[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-xl);
+  --_rp-select-padding-x: calc(var(--rp-size-control-xl) / 3);
+  --_rp-select-font-size: var(--rp-font-size-xl);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
+  --_rp-select-option-padding-y: var(--rp-spacing-2);
+}
+html.dark .rp-select[data-v-abf4b97a], [data-rp-color-scheme=dark] .rp-select[data-v-abf4b97a] {
+  --_rp-select-invalid-border: var(--rp-color-red-light-color);
+  --_rp-select-invalid-ring: color-mix(
+      in srgb,
+      var(--rp-color-red-light-color) 32%,
+      transparent
+  );
+  --_rp-select-option-focused-bg: var(--rp-color-default-hover);
+}
+.rp-select--disabled[data-v-abf4b97a] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-select__trigger[data-v-9838513c] {
+.rp-select__trigger[data-v-abf4b97a] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   justify-content: space-between;
   width: 100%;
   min-width: 180px;
-  height: var(--rp-size-control-md);
-  padding: 0 var(--rp-spacing-3);
-  font-size: var(--rp-font-size-base);
+  height: var(--_rp-select-height);
+  padding: 0 var(--_rp-select-padding-x);
+  font-size: var(--_rp-select-font-size);
   background-color: var(--rp-color-control-bg);
   border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
   border-radius: var(--_rp-select-radius);
@@ -35,81 +79,81 @@ html.dark .rp-select[data-v-9838513c] {
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
   gap: var(--rp-spacing-2);
 }
-.rp-select__trigger[data-v-9838513c]:hover {
+.rp-select__trigger[data-v-abf4b97a]:hover {
   border-color: var(--rp-color-control-border-hover);
 }
-.rp-select__trigger[data-v-9838513c]:focus-visible {
+.rp-select__trigger[data-v-abf4b97a]:focus-visible {
   outline: none;
   border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--radius-xs[data-v-9838513c] {
+.rp-select--radius-xs[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-xs);
 }
-.rp-select--radius-sm[data-v-9838513c] {
+.rp-select--radius-sm[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-sm);
 }
-.rp-select--radius-md[data-v-9838513c] {
+.rp-select--radius-md[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-md);
 }
-.rp-select--radius-lg[data-v-9838513c] {
+.rp-select--radius-lg[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-lg);
 }
-.rp-select--radius-xl[data-v-9838513c] {
+.rp-select--radius-xl[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-xl);
 }
-.rp-select--open .rp-select__trigger[data-v-9838513c] {
+.rp-select--open .rp-select__trigger[data-v-abf4b97a] {
   border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--invalid .rp-select__trigger[data-v-9838513c] {
+.rp-select--invalid .rp-select__trigger[data-v-abf4b97a] {
   border-color: var(--_rp-select-invalid-border);
 }
-.rp-select--invalid .rp-select__trigger[data-v-9838513c]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-9838513c] {
+.rp-select--invalid .rp-select__trigger[data-v-abf4b97a]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-abf4b97a] {
   border-color: var(--_rp-select-invalid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-select-invalid-ring);
 }
-.rp-select__value[data-v-9838513c] {
+.rp-select__value[data-v-abf4b97a] {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--rp-color-control-fg);
 }
-.rp-select__placeholder[data-v-9838513c] {
+.rp-select__placeholder[data-v-abf4b97a] {
   color: var(--rp-color-control-placeholder);
 }
-.rp-select__indicator[data-v-9838513c] {
+.rp-select__indicator[data-v-abf4b97a] {
   display: inline-flex;
   align-items: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__indicator svg[data-v-9838513c] {
+.rp-select__indicator svg[data-v-abf4b97a] {
   width: 100%;
   height: 100%;
 }
-.rp-select__indicator[data-v-9838513c] {
+.rp-select__indicator[data-v-abf4b97a] {
   position: relative;
   color: var(--rp-color-control-icon);
   transform: translateX(var(--rp-spacing-1));
 }
-.rp-select__arrow[data-v-9838513c] {
+.rp-select__arrow[data-v-abf4b97a] {
   display: inline-flex;
   align-items: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__arrow svg[data-v-9838513c] {
+.rp-select__arrow svg[data-v-abf4b97a] {
   width: 100%;
   height: 100%;
 }
-.rp-select__arrow[data-v-9838513c] {
+.rp-select__arrow[data-v-abf4b97a] {
   transition: opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-9838513c] {
+.rp-select__clear[data-v-abf4b97a] {
   padding: 0;
   font: inherit;
   background: none;
@@ -121,11 +165,11 @@ html.dark .rp-select[data-v-9838513c] {
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__clear svg[data-v-9838513c] {
+.rp-select__clear svg[data-v-abf4b97a] {
   width: 100%;
   height: 100%;
 }
-.rp-select__clear[data-v-9838513c] {
+.rp-select__clear[data-v-abf4b97a] {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -134,24 +178,24 @@ html.dark .rp-select[data-v-9838513c] {
   pointer-events: none;
   transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-9838513c]:hover {
+.rp-select__clear[data-v-abf4b97a]:hover {
   color: var(--rp-color-control-fg);
 }
-.rp-select__trigger:hover .rp-select__clear[data-v-9838513c] {
+.rp-select__trigger:hover .rp-select__clear[data-v-abf4b97a] {
   opacity: 1;
   pointer-events: auto;
 }
-.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-9838513c] {
+.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-abf4b97a] {
   opacity: 0;
 }
-.rp-select__dropdown[data-v-9838513c] {
+.rp-select__dropdown[data-v-abf4b97a] {
   position: absolute;
   top: calc(100% + var(--rp-spacing-2));
   left: 0;
   right: 0;
   z-index: 100;
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-select-radius);
   box-shadow: var(--rp-shadow-md);
   padding: var(--rp-spacing-1) 0;
@@ -159,41 +203,41 @@ html.dark .rp-select[data-v-9838513c] {
   overflow-y: auto;
   padding: var(--rp-spacing-1);
 }
-.rp-select__option[data-v-9838513c] {
+.rp-select__option[data-v-abf4b97a] {
   display: flex;
   align-items: center;
-  padding: var(--rp-spacing-2) var(--rp-spacing-4);
-  border-radius: calc(var(--_rp-select-radius) - var(--rp-spacing-1));
-  font-size: var(--rp-font-size-base);
+  min-height: var(--_rp-select-option-min-height);
+  padding: var(--_rp-select-option-padding-y) var(--_rp-select-padding-x);
+  border-radius: var(--_rp-select-radius);
+  font-size: var(--_rp-select-font-size);
   cursor: pointer;
-  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
+  transition: color var(--rp-transition-fast);
   color: var(--rp-color-control-fg);
 }
-.rp-select__option--focused[data-v-9838513c] {
+.rp-select__option--focused[data-v-abf4b97a] {
   background-color: var(--_rp-select-option-focused-bg);
 }
-.rp-select__option--selected[data-v-9838513c] {
-  color: var(--rp-color-primary-fg);
-  font-weight: var(--rp-font-weight-medium);
+.rp-select__option--selected[data-v-abf4b97a] {
+  color: var(--rp-primary-color-light-color);
 }
-.rp-select__option--disabled[data-v-9838513c] {
-  color: var(--rp-color-text-disabled);
+.rp-select__option--disabled[data-v-abf4b97a] {
+  color: var(--rp-color-disabled-color);
   cursor: not-allowed;
 }
-.rp-select__empty[data-v-9838513c] {
+.rp-select__empty[data-v-abf4b97a] {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--rp-spacing-4);
-  color: var(--rp-color-text-secondary);
-  font-size: var(--rp-font-size-base);
+  color: var(--rp-color-dimmed);
+  font-size: var(--_rp-select-font-size);
 }
-.rp-select-dropdown-enter-active[data-v-9838513c],
-.rp-select-dropdown-leave-active[data-v-9838513c] {
+.rp-select-dropdown-enter-active[data-v-abf4b97a],
+.rp-select-dropdown-leave-active[data-v-abf4b97a] {
   transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-select-dropdown-enter-from[data-v-9838513c],
-.rp-select-dropdown-leave-to[data-v-9838513c] {
+.rp-select-dropdown-enter-from[data-v-abf4b97a],
+.rp-select-dropdown-leave-to[data-v-abf4b97a] {
   opacity: 0;
   transform: translateY(calc(-1 * var(--rp-spacing-1)));
 }

package/dist/select.js

@@ -1,9 +1,9 @@
 import './select.css';
+import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as useClickOutside } from "./useClickOutside.js";
-import { t as x_default } from "./x.js";
 import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/chevrons-up-down
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
@@ -104,6 +104,7 @@ function useSelect(props, emitUpdate) {
 	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value));
 	const rootClass = computed(() => bem("rp-select", {
 		open: isOpen.value,
+		[`size-${props.size}`]: Boolean(props.size),
 		[`radius-${props.radius}`]: Boolean(props.radius),
 		disabled: control.disabled,
 		invalid: control.invalid
@@ -224,13 +225,13 @@ function useSelect(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<input data-v-9838513c type=hidden>");
-var t1 = template("<button data-v-9838513c type=button class=rp-select__clear aria-label=\"Clear selection\"tabindex=-1></button>");
+var t0 = template("<input data-v-abf4b97a type=hidden>");
+var t1 = template("<button data-v-abf4b97a type=button class=rp-select__clear tabindex=-1></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-9838513c class=rp-select__empty>");
-var t4 = template("<div data-v-9838513c role=option> ");
-var t5 = template("<div data-v-9838513c class=rp-select__dropdown role=listbox>");
-var t6 = template("<div data-v-9838513c><div data-v-9838513c class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-9838513c> </span><span data-v-9838513c class=rp-select__indicator><span data-v-9838513c class=rp-select__arrow aria-hidden=true>", 1);
+var t3 = template("<div data-v-abf4b97a class=rp-select__empty>");
+var t4 = template("<div data-v-abf4b97a role=option> ");
+var t5 = template("<div data-v-abf4b97a class=rp-select__dropdown role=listbox>");
+var t6 = template("<div data-v-abf4b97a><div data-v-abf4b97a class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-abf4b97a> </span><span data-v-abf4b97a class=rp-select__indicator><span data-v-abf4b97a class=rp-select__arrow aria-hidden=true>", 1);
 delegateEvents("mousedown", "click", "keydown");
 //#endregion
 //#region src/components/select/select.vue
@@ -242,12 +243,14 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		name: {},
 		modelValue: {},
 		options: { default: () => [] },
+		size: {},
 		radius: {},
 		placeholder: { default: "Select..." },
 		clearable: {
 			type: Boolean,
 			default: false
 		},
+		clearLabel: { default: "Clear selection" },
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -312,6 +315,7 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		setInsertionState(n10, 0, 0);
 		createIf(() => unref(canClear), () => {
 			const n7 = t1();
+			renderEffect(() => setAttr(n7, "aria-label", __props.clearLabel));
 			setInsertionState(n7, null, 0);
 			createComponent(unref(x_default));
 			n7.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
@@ -373,8 +377,6 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		_setTemplateRef(n25, selectRef, null, "selectRef");
 		return n25;
 	}
-}), [["__scopeId", "data-v-9838513c"]]);
+}), [["__scopeId", "data-v-abf4b97a"]]);
 //#endregion
 export { select_default as t };
-
-//# sourceMappingURL=select.js.map