origam 2.16.0 → 2.17.0

package/dist/src/components/Messages/OrigamMessages.vue

@@ -4,8 +4,8 @@
 			:transition="transition"
 	>
 		<component
-				:is="props.tag"
-				:id="props.id"
+				:is="tag"
+				:id="id"
 				:class="messagesClasses"
 				:style="[messagesStyles, rootTypographyStyles]"
 				aria-live="polite"
@@ -34,23 +34,23 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import { OrigamSlideY, OrigamTransition } from "../../components";
-import {
-  useBorder,
-  useDefaults,
-  useDensity,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useSsrBoot,
-  useStyle,
-  useTextColor,
-  useTypography
-} from "../../composables";
-import { DENSITY } from "../../enums";
-import { toKebabCase, wrapInArray } from "../../utils";
-const _props = defineProps({
+import OrigamSlideY from "../Transition/OrigamSlideY.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { toKebabCase, wrapInArray } from "../../utils/Commons/commons.util";
+const props = defineProps({
   active: { type: Boolean, required: false },
   messages: { type: [Array, String], required: false },
   id: { type: String, required: false },
@@ -58,7 +58,6 @@ const _props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) },
-  disabled: { type: Boolean, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -94,13 +93,10 @@ const _props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   elevation: { type: [Number, String], required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  lineHeight: { type: null, required: false }
 });
-const props = useDefaults(_props);
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const messages = computed(() => {
@@ -108,12 +104,19 @@ const messages = computed(() => {
 });
 const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
 const { typographyStyles: rootTypographyStyles } = useTypography(props, "messages");
+useUnsupportedProp(
+  "OrigamMessages",
+  "active",
+  "visibility is driven by `messages` being non-empty, never by this prop.",
+  () => props.active !== void 0
+);
 const { typographyStyles: childTypographyStyles } = useTypography(props, "messages__message");
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { densityClasses } = useDensity(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const { isBooted } = useSsrBoot();
 const messagesStyles = computed(() => {
   return [
@@ -122,6 +125,7 @@ const messagesStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     textColorStyles.value,
+    elevationStyles.value,
     props.style
   ];
 });
@@ -132,12 +136,13 @@ const messagesClasses = computed(() => {
     densityClasses.value,
     roundedClasses.value,
     borderClasses.value,
+    elevationClasses.value,
     paddingClasses.value,
     marginClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(messagesStyles);
+const { id, css, load, isLoaded, unload } = useStyle(messagesStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -151,7 +156,7 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-messages {
 		color: var(--origam-messages---color, currentColor);
-		padding: var(--origam-messages---density, 0);
+		padding: var(--origam-messages---padding, var(--origam-messages---density, 0));
 		flex: var(--origam-messages---flex, 1 1 auto);
 		font-size: var(--origam-messages---font-size, 12px);
 		min-height: var(--origam-messages---min-height, 14px);

package/dist/src/components/NumberField/OrigamNumberField.vue

@@ -1,9 +1,10 @@
 <template>
 	<origam-input
 			v-if="compact"
+			:id="id"
 			ref="origamCompactInputRef"
 			v-model="model"
-			:validation-value="model"
+			:validation-value="effectiveValidationValue"
 			:focused="isFocused"
 			:rules="rules"
 			:error="error"
@@ -28,15 +29,22 @@
 						:disabled="!canDecrease"
 						size="small"
 						data-cy="numberfield-compact-decrement"
-						aria-label="Decrement"
+						:aria-label="t(decrementAriaLabel)"
 						@click="handleCompactDecrement"
 				/>
 				<input
+						:id="id"
 						v-model="compactInputText"
 						type="text"
 						inputmode="numeric"
+						role="spinbutton"
 						class="origam-number-field__compact-input"
 						:aria-label="label"
+						:aria-valuenow="model ?? undefined"
+						:aria-valuemin="min"
+						:aria-valuemax="max"
+						:aria-valuetext="compactInputText || undefined"
+						:aria-required="required ? 'true' : undefined"
 						data-cy="numberfield-compact-input"
 						@blur="handleBlur"
 						@focus="handleFocus"
@@ -48,7 +56,7 @@
 						:disabled="!canIncrease"
 						size="small"
 						data-cy="numberfield-compact-increment"
-						aria-label="Increment"
+						:aria-label="t(incrementAriaLabel)"
 						@click="handleCompactIncrement"
 				/>
 			</div>
@@ -56,12 +64,17 @@
 	</origam-input>
 	<origam-text-field
 			v-else
+			:id="id"
 			ref="origamTextFieldRef"
 			v-model:model-value="inputText"
 			:class="numberFieldClasses"
 			:style="numberFieldStyles"
-			:validation-value="model"
+			:validation-value="effectiveValidationValue"
 			inputmode="decimal"
+			:aria-valuenow="model ?? undefined"
+			:aria-valuemin="min"
+			:aria-valuemax="max"
+			:aria-valuetext="inputText || undefined"
 			v-bind="textFieldProps"
 			@beforeinput="handleBeforeInput"
 			@blur="handleBlur"
@@ -70,6 +83,8 @@
 			@keydown="handleKeydown"
 			@mousedown="handleMousedown"
 			@click:clear="handleClear"
+			@click:prepend="handleClickPrepend"
+			@click:append="handleClickAppend"
 			@click:prepend-inner="handleClickPrependInner"
 			@click:append-inner="handleClickAppendInner"
 	>
@@ -267,12 +282,26 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
-import { OrigamBtn, OrigamDivider, OrigamInput, OrigamTextField } from "../../components";
-import { useAdjacentInner, useDefaults, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
-import { DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
-import { clamp, forwardRefs } from "../../utils";
-const _props = defineProps({
+import { computed, getCurrentInstance, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch, watchEffect } from "vue";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamDivider from "../Divider/OrigamDivider.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamTextField from "../TextField/OrigamTextField.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useHold } from "../../composables/NumberField/hold.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { UNSEEDED } from "../../consts/Commons/vmodel.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { TEXT_FIELD_TYPE } from "../../enums/TextField/text-field.enum";
+import { clamp } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+const props = defineProps({
   autofocus: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
   persistentPlaceholder: { type: Boolean, required: false },
@@ -292,21 +321,19 @@ const _props = defineProps({
   split: { type: Boolean, required: false, default: false },
   hideControls: { type: Boolean, required: false },
   compact: { type: Boolean, required: false, default: false },
+  decrementAriaLabel: { type: String, required: false, default: "origam.number_field.aria_label.decrement" },
+  incrementAriaLabel: { type: String, required: false, default: "origam.number_field.aria_label.increment" },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -358,7 +385,6 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -391,10 +417,11 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const props = useDefaults(_props);
-const emits = defineEmits(["click:control", "mousedown:control", "click:clear", "increment", "decrement", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["click:control", "mousedown:control", "click:clear", "increment", "decrement", "update:focused", "click:appendInner", "click:prependInner", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const { t } = useLocale();
+const vm = getCurrentInstance();
 const slots = useSlots();
 const origamTextFieldRef = ref();
 const origamCompactInputRef = ref();
@@ -406,18 +433,37 @@ const model = useVModel(
   (val) => val ?? null,
   (val) => val == null ? val ?? null : clamp(Number(val), props.min, props.max)
 );
+const effectiveValidationValue = computed(() => {
+  return props.validationValue === void 0 ? model.value : props.validationValue;
+});
 const { isFocused, onFocus, onBlur } = useFocus(props);
 const {
   onClickPrependInner: handleClickPrependInner,
   onClickAppendInner: handleClickAppendInner
 } = useAdjacentInner(props);
+const {
+  onClickPrepend: handleClickPrepend,
+  onClickAppend: handleClickAppend
+} = useAdjacent(props);
 const correctPrecision = (val, precision = props.precision) => {
   const num = typeof val === "number" ? val : Number(val);
   if (Number.isNaN(num)) return String(val);
   const fixed = precision == null ? String(num) : num.toFixed(precision);
   return isFocused.value ? Number(fixed).toString() : fixed;
 };
-const _inputText = shallowRef(null);
+const _inputTextRaw = shallowRef(UNSEEDED);
+const seedInputText = () => {
+  const val = props.modelValue;
+  if (val == null) return null;
+  if (!isNaN(val)) return correctPrecision(val);
+  return null;
+};
+const _inputText = computed({
+  get: () => _inputTextRaw.value === UNSEEDED ? seedInputText() : _inputTextRaw.value,
+  set: (val) => {
+    _inputTextRaw.value = val;
+  }
+});
 watch(() => props.modelValue, (val) => {
   if (isFocused.value && !controlsDisabled.value) return;
   if (val == null) {
@@ -425,7 +471,7 @@ watch(() => props.modelValue, (val) => {
   } else if (!isNaN(val)) {
     _inputText.value = correctPrecision(val);
   }
-}, { immediate: true });
+});
 const inputText = computed({
   get: () => _inputText.value,
   set(val) {
@@ -450,6 +496,12 @@ watch(() => props.precision, () => formatInputValue());
 onMounted(() => {
   clampModel();
 });
+watchEffect(() => {
+  if (props.compact) return;
+  const root = vm?.proxy?.$el;
+  const input = root?.querySelector?.("input");
+  input?.setAttribute("role", "spinbutton");
+}, { flush: "post" });
 const inferPrecision = (value) => {
   if (value == null) return 0;
   const str = value.toString();
@@ -476,7 +528,7 @@ const toggleUpDown = (increment = true) => {
     }
   }
 };
-const { holdStart, holdStop } = useHold({ toggleUpDown }, props.holdRepeat, props.holdDelay);
+const { holdStart, holdStop } = useHold({ toggleUpDown }, () => props.holdRepeat, () => props.holdDelay);
 const handleBeforeInput = (e) => {
   if (!e.data) return;
   const existingTxt = e.target?.value;
@@ -599,8 +651,7 @@ const numberFieldClasses = computed(() => {
       "origam-number-field--hide-input": props.hideInput,
       "origam-number-field--inset": props.inset,
       "origam-number-field--split": props.split,
-      "origam-number-field--hide-controls": props.hideControls,
-      "origam-number-field--reverse": props.reverse
+      "origam-number-field--hide-controls": props.hideControls
     },
     props.class
   ];
@@ -639,7 +690,7 @@ const handleCompactIncrement = () => {
 const handleCompactDecrement = () => {
   toggleUpDown(false);
 };
-const { id, css, load, isLoaded, unload } = useStyle(numberFieldStyles);
+const { id, css, load, isLoaded, unload } = useStyle(numberFieldStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   css,
@@ -692,6 +743,7 @@ defineExpose(forwardRefs({
 			.origam-btn {
 				background-color: var(--origam-number-field__control---background-color, transparent);
 				border-radius: var(--origam-number-field__control---border-radius, 0);
+				cursor: var(--origam-number-field__control---cursor, pointer);
 			}
 		}
 

package/dist/src/components/NumberFormat/OrigamNumberFormat.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			class="origam-number-format"
 			:class="rootClasses"
 			:style="rootStyles"
@@ -19,7 +20,7 @@
 import {
   computed
 } from "vue";
-import { useNumberFormat } from "../../composables";
+import { useNumberFormat } from "../../composables/NumberFormat/number-format.composable";
 const props = defineProps({
   value: { type: [Number, String], required: true },
   format: { type: null, required: false, default: "decimal" },
@@ -41,6 +42,7 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "span" }
 });
+defineEmits([]);
 defineSlots();
 const resolvedOptions = computed(() => ({
   format: props.format,

package/dist/src/components/OtpInputField/OrigamOtpInputField.vue

@@ -1,13 +1,17 @@
 <template>
 	<div
+			:aria-label="label || undefined"
 			:class="otpInputFieldClasses"
 			:style="otpInputFieldStyles"
+			:role="role"
 			v-bind="{ ...rootAttrs }"
 	>
 		<div
 				ref="contentRef"
 				:style="dimensionStyles"
 				class="origam-otp-input-field__content"
+				@click="handleControlClick"
+				@mousedown="handleControlMousedown"
 		>
 			<template
 					v-for="(_, i) in fields"
@@ -23,6 +27,9 @@
 						ref="origamFieldRef"
 						:focused="(isFocused && focusAll) || focusIndex === i"
 						v-bind="{...fieldProps(i)}"
+						@click:clear="handleClear"
+						@click:append-inner="handleClickAppendInner"
+						@click:prepend-inner="handleClickPrependInner"
 				>
 					<template
 							v-if="slots.prependInner"
@@ -111,7 +118,7 @@
 					content-class="origam-otp-input-field__loader"
 					persistent
 			>
-				<template #loader>
+				<template #default>
 					<slot name="loader">
 						<origam-progress
 								:color="typeof loading === 'string' ? loading : undefined"
@@ -142,11 +149,24 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
-import { OrigamField, OrigamOverlay, OrigamProgress } from "../../components";
+import OrigamField from "../Field/OrigamField.vue";
+import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
 import { OrigamMessages } from "../../components/Messages";
-import { useDimension, useFocus, useLocale, useProps, useTypography, useValidation, useVModel, useStyle } from "../../composables";
-import { OTP_INPUT_FIELD_TYPE, PROGRESS_TYPE } from "../../enums";
-import { filterInputAttrs, focusChild, forwardRefs, getUid, wrapInArray } from "../../utils";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useValidation } from "../../composables/Commons/validation.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { OTP_INPUT_FIELD_TYPE } from "../../enums/OtpInputField/otp-input-field.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { focusChild, wrapInArray } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 const props = defineProps({
   autofocus: { type: Boolean, required: false },
   divider: { type: String, required: false },
@@ -154,24 +174,19 @@ const props = defineProps({
   length: { type: [Number, String], required: false, default: 6 },
   modelValue: { type: [Number, String, null], required: false },
   placeholder: { type: String, required: false },
-  persistentPlaceholder: { type: Boolean, required: false },
-  role: { type: String, required: false },
+  role: { type: String, required: false, default: "group" },
   type: { type: null, required: false, default: OTP_INPUT_FIELD_TYPE.NUMBER },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -223,11 +238,7 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -256,7 +267,7 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const emits = defineEmits(["finish", "click:control", "mousedown:control", "click:clear", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["finish", "click:control", "mousedown:control", "update:modelValue", "update:focused", "click:appendInner", "click:prependInner", "click:clear"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -395,6 +406,23 @@ const handleBlur = () => {
   blur();
   focusIndex.value = -1;
 };
+const handleControlClick = (e) => {
+  emits("click:control", e);
+};
+const handleControlMousedown = (e) => {
+  emits("mousedown:control", e);
+};
+const handleClear = (e) => {
+  e.stopPropagation();
+  reset();
+  emits("click:clear", e);
+};
+const handleClickAppendInner = (e) => {
+  emits("click:appendInner", e);
+};
+const handleClickPrependInner = (e) => {
+  emits("click:prependInner", e);
+};
 const isInvalidValue = (value) => {
   return props.type === OTP_INPUT_FIELD_TYPE.NUMBER && /[^0-9]/g.test(value);
 };
@@ -488,10 +516,10 @@ defineExpose(forwardRefs({
 		&__field {
 			color: var(--origam-otp-input-field__cell---color, inherit);
 			font-size: var(--origam-otp-input-field__cell---font-size, 1.25rem);
-			height: 100%;
+			height: var(--origam-otp-input-field__cell---height, 100%);
 			outline: var(--origam-otp-input-field__cell---outline, none);
 			text-align: var(--origam-otp-input-field__cell---text-align, center);
-			width: 100%;
+			width: var(--origam-otp-input-field__cell---width, 100%);
 			border: var(--origam-otp-input-field__cell---border, none);
 			background: var(--origam-otp-input-field__cell---background, transparent);
 
@@ -536,7 +564,7 @@ defineExpose(forwardRefs({
 		&--error {
 			#{$this}__details {
 				> .origam-messages {
-					color: var(--origam-otp-input-field---error-color, var(--origam-color__feedback--danger---fg-subtle));
+					color: var(--origam-otp-input-field---error-color, var(--origam-color__feedback--danger---fgSubtle));
 					opacity: 1;
 				}
 			}