ropav 0.0.9 → 0.0.11

package/dist/modal.js

@@ -1,24 +1,18 @@
 import './modal.css';
 import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
+import { n as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useFocusTrap } from "./useFocusTrap.js";
+import { n as useTeleportTarget } from "./useTeleportTarget.js";
 import { t as icon_button_default } from "./icon-button.js";
 import { t as overlay_default } from "./overlay.js";
-import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
+import { VaporTeleport, VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
 //#region src/components/modal/useModal.ts
 var bodyScrollLockCount = 0;
 var previousBodyOverflow = "";
-var activeModalStack = [];
 var DEFAULT_ROLE = "dialog";
 var DEFAULT_SIZE = "md";
-var FOCUSABLE_SELECTOR = [
-	"a[href]",
-	"button:not([disabled])",
-	"textarea:not([disabled])",
-	"input:not([disabled])",
-	"select:not([disabled])",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
 var MODAL_PRESET_SIZES = /* @__PURE__ */ new Set([
 	"sm",
 	"md",
@@ -32,23 +26,6 @@ function isHTMLElement(value) {
 function isModalPresetSize(size) {
 	return MODAL_PRESET_SIZES.has(size);
 }
-function isFocusable(element) {
-	if (element.getAttribute("aria-hidden") === "true") return false;
-	if (element.hasAttribute("disabled")) return false;
-	return element.tabIndex >= 0;
-}
-function getFocusableElements(panel) {
-	if (!panel) return [];
-	return [...panel.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
-}
-function focusElement(element) {
-	if (!element) return;
-	try {
-		element.focus({ preventScroll: true });
-	} catch {
-		element.focus();
-	}
-}
 function lockBodyScroll() {
 	if (typeof document === "undefined") return void 0;
 	if (bodyScrollLockCount === 0) {
@@ -77,11 +54,8 @@ function useModal(props, emitOpenChange) {
 	const generatedId = useId();
 	const panelRef = ref(null);
 	const uncontrolledOpen = ref(false);
-	const modalToken = Symbol("modal");
 	let isMounted = false;
 	let isActiveModal = false;
-	let previousActiveElement = null;
-	let removeDocumentListeners;
 	let unlockScroll;
 	const modalId = computed(() => props.id ?? `${generatedId}-modal`);
 	const titleId = computed(() => `${modalId.value}-title`);
@@ -142,95 +116,34 @@ function useModal(props, emitOpenChange) {
 		if (typeof initialFocus === "string") return queryPanelElement(panel, initialFocus);
 		return panel.contains(initialFocus) ? initialFocus : null;
 	}
-	function focusInitialElement() {
-		const firstFocusable = getFocusableElements(panelRef.value)[0];
-		focusElement(resolveInitialFocus() ?? firstFocusable ?? panelRef.value);
-	}
-	function addToStack() {
-		if (!activeModalStack.includes(modalToken)) activeModalStack.push(modalToken);
-	}
-	function removeFromStack() {
-		const index = activeModalStack.indexOf(modalToken);
-		if (index !== -1) activeModalStack.splice(index, 1);
-	}
-	function isTopModal() {
-		return activeModalStack[activeModalStack.length - 1] === modalToken;
-	}
-	function trapFocus(event) {
-		const panel = panelRef.value;
-		if (!panel) return;
-		const focusableElements = getFocusableElements(panel);
-		if (focusableElements.length === 0) {
-			event.preventDefault();
-			focusElement(panel);
-			return;
-		}
-		const firstElement = focusableElements[0];
-		const lastElement = focusableElements[focusableElements.length - 1];
-		const activeElement = document.activeElement;
-		if (!(activeElement instanceof Node && panel.contains(activeElement))) {
-			event.preventDefault();
-			focusElement(firstElement);
-			return;
-		}
-		if (event.shiftKey && activeElement === firstElement) {
-			event.preventDefault();
-			focusElement(lastElement);
-			return;
-		}
-		if (!event.shiftKey && activeElement === lastElement) {
-			event.preventDefault();
-			focusElement(firstElement);
-		}
-	}
-	function onDocumentKeydown(event) {
-		if (!isOpen.value || !isTopModal()) return;
-		if (event.key === "Escape") {
-			if (props.closeOnEscape === false) return;
+	const focusTrap = useFocusTrap(panelRef, {
+		...props.focusTrapOptions,
+		initialFocus: () => resolveInitialFocus() ?? void 0,
+		fallbackFocus: () => panelRef.value,
+		returnFocusOnDeactivate: props.returnFocus !== false,
+		escapeDeactivates: (event) => {
+			if (props.closeOnEscape === false) return false;
 			event.preventDefault();
 			closeModal();
-			return;
-		}
-		if (event.key === "Tab") trapFocus(event);
-	}
-	function bindDocumentListeners() {
-		if (typeof document === "undefined" || removeDocumentListeners) return;
-		document.addEventListener("keydown", onDocumentKeydown);
-		removeDocumentListeners = () => {
-			document.removeEventListener("keydown", onDocumentKeydown);
-			removeDocumentListeners = void 0;
-		};
-	}
-	function restoreFocus() {
-		if (props.returnFocus === false) {
-			previousActiveElement = null;
-			return;
-		}
-		if (previousActiveElement?.isConnected) focusElement(previousActiveElement);
-		previousActiveElement = null;
-	}
+			return false;
+		},
+		allowOutsideClick: true,
+		preventScroll: true,
+		delayInitialFocus: props.focusTrapOptions?.delayInitialFocus ?? false,
+		delayReturnFocus: props.focusTrapOptions?.delayReturnFocus ?? false
+	});
 	function activateModal() {
 		if (isActiveModal) return;
 		isActiveModal = true;
-		addToStack();
-		if (typeof document !== "undefined") {
-			const activeElement = document.activeElement;
-			previousActiveElement = isHTMLElement(activeElement) ? activeElement : null;
-		}
-		bindDocumentListeners();
 		if (props.preventScroll !== false) unlockScroll = lockBodyScroll();
-		nextTick(() => {
-			if (isActiveModal) focusInitialElement();
-		});
+		focusTrap.activate();
 	}
 	function deactivateModal() {
 		if (!isActiveModal) return;
 		isActiveModal = false;
-		removeFromStack();
-		removeDocumentListeners?.();
+		focusTrap.deactivate({ returnFocus: props.returnFocus !== false });
 		unlockScroll?.();
 		unlockScroll = void 0;
-		restoreFocus();
 	}
 	function onOverlayClick(event) {
 		if (props.closeOnOverlayClick === false || event.target !== event.currentTarget) return;
@@ -275,17 +188,16 @@ function useModal(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<h2 data-v-657f313d class=rp-modal__title> ");
-var t1 = template("<p data-v-657f313d class=rp-modal__description> ");
-var t2 = template("<div data-v-657f313d class=rp-modal__heading>");
-var t3 = template("<div data-v-657f313d class=rp-modal__header>");
-var t4 = template("<div data-v-657f313d class=rp-modal__body>");
-var t5 = template("<div data-v-657f313d class=rp-modal__footer>");
-var t6 = template("<div data-v-657f313d><section data-v-657f313d class=rp-modal__panel aria-modal=true tabindex=-1>");
+var t0 = template("<h2 data-v-3646bb42> ");
+var t1 = template("<p data-v-3646bb42> ");
+var t2 = template("<div data-v-3646bb42 class=rp-modal__heading>");
+var t3 = template("<div data-v-3646bb42>");
+var t4 = template("<div data-v-3646bb42><section data-v-3646bb42>");
 //#endregion
 //#region src/components/modal/modal.vue
 var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpModal",
+	inheritAttrs: false,
 	__name: "modal",
 	props: {
 		id: {},
@@ -324,104 +236,152 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		keepMounted: {
 			type: Boolean,
 			default: false
-		}
+		},
+		focusTrapOptions: { default: () => ({}) },
+		teleport: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit, slots: $slots }) {
 		const props = __props;
+		const teleportTo = useTeleportTarget(() => props.teleportTo);
 		const emit = __emit;
 		const { panelRef, modalId, titleId, descriptionId, role, isOpen, shouldRender, hasHeader, hasFooter, showCloseButton, headerId, ariaLabelledby, ariaDescribedby, ariaLabel, rootClass, rootStyle, stateClass, slotProps, closeModal, onOverlayClick } = useModal(props, (open) => {
 			emit("update:open", open);
 		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const state = computed(() => isOpen.value ? "open" : "closed");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, stateClass.value],
+			style: rootStyle.value,
+			"data-state": state.value
+		}));
+		const overlayClassNames = computed(() => ({ root: ["rp-modal__overlay", props.classNames?.overlay] }));
+		const overlayStyles = computed(() => ({ root: props.styles?.overlay }));
+		const panelAttrs = computed(() => ({
+			...getPartAttrs("panel", { class: "rp-modal__panel" }),
+			"data-state": state.value
+		}));
+		const closeClassNames = computed(() => ({ root: ["rp-modal__close", props.classNames?.close] }));
+		const closeStyles = computed(() => ({ root: props.styles?.close }));
 		const _setTemplateRef = createTemplateRefSetter();
-		return createComponent(VaporTransition, {
-			name: "rp-modal",
-			persisted: ""
-		}, extend(() => {
-			return createIf(() => unref(shouldRender), () => {
-				const n28 = t6();
-				const n27 = child(n28, 1);
-				renderEffect(() => {
-					setClass(n28, [unref(rootClass), unref(stateClass)]);
-					setStyle(n28, unref(rootStyle));
-				});
-				setInsertionState(n28, 0, 0);
-				createComponent(overlay_default, { $: [() => __props.overlayProps, {
-					class: "rp-modal__overlay",
-					"z-index": 0,
-					interactive: "",
-					onClick: () => unref(onOverlayClick)
-				}] });
-				renderEffect(() => {
-					setProp(n27, "id", unref(modalId));
-					setProp(n27, "role", unref(role));
-					setAttr(n27, "aria-label", unref(ariaLabel));
-					setAttr(n27, "aria-labelledby", unref(ariaLabelledby));
-					setAttr(n27, "aria-describedby", unref(ariaDescribedby));
-				});
-				setInsertionState(n27, null, 0);
-				createIf(() => unref(hasHeader), () => {
-					const n14 = t3();
-					renderEffect(() => setProp(n14, "id", unref(headerId)));
-					setInsertionState(n14, null, 0);
-					createSlot("header", { $: [() => unref(slotProps)] }, () => {
-						const n13 = t2();
-						setInsertionState(n13, null, 0);
-						createIf(() => __props.title, () => {
-							const n9 = t0();
-							const x9 = txt(n9);
-							renderEffect(() => {
-								setProp(n9, "id", unref(titleId));
-								setText(x9, toDisplayString(__props.title));
+		return createComponent(VaporTeleport, {
+			to: () => unref(teleportTo),
+			disabled: () => !__props.teleport
+		}, () => {
+			return createComponent(VaporTransition, {
+				name: "rp-modal",
+				persisted: ""
+			}, extend(() => {
+				return createIf(() => unref(shouldRender), () => {
+					const n28 = t4();
+					const n27 = child(n28, 1);
+					renderEffect(() => setDynamicProps(n28, [rootAttrs.value]));
+					setInsertionState(n28, 0, 0);
+					createComponent(overlay_default, { $: [() => __props.overlayProps, {
+						"class-names": () => overlayClassNames.value,
+						styles: () => overlayStyles.value,
+						"z-index": 0,
+						interactive: "",
+						onClick: () => unref(onOverlayClick)
+					}] });
+					renderEffect(() => setDynamicProps(n27, [
+						{ id: unref(modalId) },
+						panelAttrs.value,
+						{
+							role: unref(role),
+							"aria-modal": "true",
+							"aria-label": unref(ariaLabel),
+							"aria-labelledby": unref(ariaLabelledby),
+							"aria-describedby": unref(ariaDescribedby),
+							tabindex: "-1"
+						}
+					]));
+					setInsertionState(n27, null, 0);
+					createIf(() => unref(hasHeader), () => {
+						const n14 = t3();
+						renderEffect(() => setDynamicProps(n14, [{ id: unref(headerId) }, unref(getPartAttrs)("header", { class: "rp-modal__header" })]));
+						setInsertionState(n14, null, 0);
+						createSlot("header", { $: [() => unref(slotProps)] }, () => {
+							const n13 = t2();
+							setInsertionState(n13, null, 0);
+							createIf(() => __props.title, () => {
+								const n9 = t0();
+								const x9 = txt(n9);
+								renderEffect(() => {
+									setDynamicProps(n9, [{ id: unref(titleId) }, unref(getPartAttrs)("title", { class: "rp-modal__title" })]);
+									setText(x9, toDisplayString(__props.title));
+								});
+								return n9;
 							});
-							return n9;
-						});
-						setInsertionState(n13, null, 1);
-						createIf(() => __props.description, () => {
-							const n12 = t1();
-							const x12 = txt(n12);
-							renderEffect(() => {
-								setProp(n12, "id", unref(descriptionId));
-								setText(x12, toDisplayString(__props.description));
+							setInsertionState(n13, null, 1);
+							createIf(() => __props.description, () => {
+								const n12 = t1();
+								const x12 = txt(n12);
+								renderEffect(() => {
+									setDynamicProps(n12, [{ id: unref(descriptionId) }, unref(getPartAttrs)("description", { class: "rp-modal__description" })]);
+									setText(x12, toDisplayString(__props.description));
+								});
+								return n12;
 							});
-							return n12;
+							return n13;
+						}, 1);
+						return n14;
+					});
+					setInsertionState(n27, null, 1);
+					createIf(() => unref(showCloseButton), () => {
+						return createComponent(icon_button_default, {
+							"class-names": () => closeClassNames.value,
+							styles: () => closeStyles.value,
+							ariaLabel: () => __props.closeLabel,
+							variant: "ghost",
+							size: "sm",
+							onClick: () => unref(closeModal)
+						}, () => {
+							return createComponent(unref(x_default));
 						});
-						return n13;
-					}, 1);
-					return n14;
-				});
-				setInsertionState(n27, null, 1);
-				createIf(() => unref(showCloseButton), () => {
-					return createComponent(icon_button_default, {
-						class: "rp-modal__close",
-						ariaLabel: () => __props.closeLabel,
-						variant: "ghost",
-						size: "sm",
-						onClick: () => unref(closeModal)
-					}, () => {
-						return createComponent(unref(x_default));
 					});
-				});
-				setInsertionState(n27, null, 2);
-				createIf(() => $slots.default, () => {
-					const n22 = t4();
-					setInsertionState(n22, null, 0);
-					createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
-					return n22;
-				});
-				setInsertionState(n27, null, 3);
-				createIf(() => unref(hasFooter), () => {
-					const n26 = t5();
-					setInsertionState(n26, null, 0);
-					createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
-					return n26;
-				});
-				_setTemplateRef(n27, panelRef, null, "panelRef");
-				applyVShow(n28, () => unref(isOpen));
-				return n28;
-			}, null, 129);
-		}, { _: 8 }), true);
+					setInsertionState(n27, null, 2);
+					createIf(() => $slots.default, () => {
+						const n22 = t3();
+						renderEffect(() => setDynamicProps(n22, [unref(getPartAttrs)("body", { class: "rp-modal__body" })]));
+						setInsertionState(n22, null, 0);
+						createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
+						return n22;
+					});
+					setInsertionState(n27, null, 3);
+					createIf(() => unref(hasFooter), () => {
+						const n26 = t3();
+						renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("footer", { class: "rp-modal__footer" })]));
+						setInsertionState(n26, null, 0);
+						createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
+						return n26;
+					});
+					_setTemplateRef(n27, panelRef, null, "panelRef");
+					applyVShow(n28, () => unref(isOpen));
+					return n28;
+				}, null, 129);
+			}, { _: 8 }));
+		}, true);
 	}
-}), [["__scopeId", "data-v-657f313d"]]);
+}), [["__scopeId", "data-v-3646bb42"]]);
+//#endregion
+//#region src/components/modal/types.ts
+var modalParts = [
+	"root",
+	"overlay",
+	"panel",
+	"header",
+	"title",
+	"description",
+	"body",
+	"footer",
+	"close"
+];
 //#endregion
-export { modal_default as t };
+export { modal_default as n, modalParts as t };

package/dist/number-input.css

@@ -1,86 +1,88 @@
-.rp-number-input[data-v-b5d8edf1] {
-  --_rp-number-input-control-size: var(--_rp-input-height);
-  --_rp-number-input-text-align: left;
-  overflow: hidden;
-  vertical-align: middle;
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__native {
-  appearance: textfield;
-  text-align: var(--_rp-number-input-text-align);
-}
-.rp-number-input--text-align-center[data-v-b5d8edf1] {
-  --_rp-number-input-text-align: center;
-}
-.rp-number-input--text-align-right[data-v-b5d8edf1] {
-  --_rp-number-input-text-align: right;
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-inner-spin-button,
-.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-outer-spin-button {
-  margin: 0;
-  appearance: none;
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__left,
-.rp-number-input[data-v-b5d8edf1] .rp-input__right {
-  align-self: stretch;
-  margin-block: calc(-1 * var(--rp-border-width-thin));
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__left {
-  margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
-}
-.rp-number-input[data-v-b5d8edf1] .rp-input__right {
-  margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
-}
-.rp-number-input__controls[data-v-b5d8edf1] {
-  display: inline-flex;
-  height: var(--_rp-input-height);
-  flex-shrink: 0;
-}
-.rp-number-input__controls--left[data-v-b5d8edf1] {
-  border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-}
-.rp-number-input__controls--right[data-v-b5d8edf1] {
-  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-}
-.rp-number-input__control[data-v-b5d8edf1] {
-  padding: 0;
-  font: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--_rp-number-input-control-size);
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  color: var(--rp-color-control-icon);
-  transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), opacity var(--rp-transition-fast);
-}
-.rp-number-input__control + .rp-number-input__control[data-v-b5d8edf1] {
-  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-}
-.rp-number-input__control[data-v-b5d8edf1]:hover:not(:disabled) {
-  color: var(--rp-color-control-fg);
-  background-color: var(--rp-color-default-hover);
-}
-.rp-number-input__control[data-v-b5d8edf1]:disabled {
-  cursor: not-allowed;
-  opacity: var(--rp-opacity-disabled);
-}
-.rp-number-input__control-icon[data-v-b5d8edf1] {
-  display: inline-flex;
-  align-items: center;
-  width: 0.875em;
-  height: 0.875em;
-  flex-shrink: 0;
-}
-.rp-number-input__control-icon svg[data-v-b5d8edf1] {
-  width: 100%;
-  height: 100%;
-}
-.rp-number-input__control-icon[data-v-b5d8edf1] >  svg {
-  display: block;
-  width: 100%;
-  height: 100%;
+@layer ropav.components {
+.rp-number-input[data-v-3cef367f] {
+    --_rp-number-input-control-size: var(--_rp-input-height);
+    --_rp-number-input-text-align: left;
+    overflow: hidden;
+    vertical-align: middle;
+}
+.rp-number-input[data-v-3cef367f] .rp-input__native {
+    appearance: textfield;
+    text-align: var(--_rp-number-input-text-align);
+}
+.rp-number-input--text-align-center[data-v-3cef367f] {
+    --_rp-number-input-text-align: center;
+}
+.rp-number-input--text-align-right[data-v-3cef367f] {
+    --_rp-number-input-text-align: right;
+}
+.rp-number-input[data-v-3cef367f] .rp-input__native::-webkit-inner-spin-button,
+  .rp-number-input[data-v-3cef367f] .rp-input__native::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+}
+.rp-number-input[data-v-3cef367f] .rp-input__left,
+  .rp-number-input[data-v-3cef367f] .rp-input__right {
+    align-self: stretch;
+    margin-block: calc(-1 * var(--rp-border-width-thin));
+}
+.rp-number-input[data-v-3cef367f] .rp-input__left {
+    margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input[data-v-3cef367f] .rp-input__right {
+    margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input__controls[data-v-3cef367f] {
+    display: inline-flex;
+    height: var(--_rp-input-height);
+    flex-shrink: 0;
+}
+.rp-number-input__controls--left[data-v-3cef367f] {
+    border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__controls--right[data-v-3cef367f] {
+    border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-3cef367f] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_rp-number-input-control-size);
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    color: var(--rp-color-control-icon);
+    transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-number-input__control + .rp-number-input__control[data-v-3cef367f] {
+    border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-3cef367f]:hover:not(:disabled) {
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-default-hover);
+}
+.rp-number-input__control[data-v-3cef367f]:disabled {
+    cursor: not-allowed;
+    opacity: var(--rp-opacity-disabled);
+}
+.rp-number-input__control-icon[data-v-3cef367f] {
+    display: inline-flex;
+    align-items: center;
+    width: 0.875em;
+    height: 0.875em;
+    flex-shrink: 0;
+}
+.rp-number-input__control-icon svg[data-v-3cef367f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-number-input__control-icon[data-v-3cef367f] >  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
 }